小编Ric*_*ing的帖子

如何计算所需的色调旋转以生成特定颜色?

我有一个白色图像,我用作div的背景,我想颜色以匹配主题主色.我知道我能做到:

filter: sepia() saturate(10000%) hue-rotate(30deg);
Run Code Online (Sandbox Code Playgroud)

并循环hue-rotate查找颜色,但是可以提前计算这个值吗?鉴于指定的十六进制值非常暗,我想我也需要包含invert(%)过滤器.

鉴于十六进制值#689d94什么数学做我需要做什么来计算期望hue-rotateinvert我的白色背景图像转换成相同颜色值?

编辑

这是一个div白色背景图像被绿色过滤的片段.这里的诀窍是,它是整个div被过滤的,而不仅仅是图像.如果我要div在文本中输入一些文字颜色也会变成绿色.

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
  filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}
Run Code Online (Sandbox Code Playgroud)
<div>
  </div>
Run Code Online (Sandbox Code Playgroud)

css css-filters

61
推荐指数
3
解决办法
3万
查看次数

CSS Page-Break在所有浏览器中都不起作用

我无法在大多数浏览器中使用它,除了IE(它甚至可以在IE6中正常工作)和Opera.

Firefox正确分隔div但只打印第一页.

Chrome和Safari仅将分页符应用于最后一个div.

如何正确地在所有浏览器中使用它?

HTML:

<div id="leftNav">
  <ul>
    <!--links etc-->
  </ul>
</div>
<div id="mainBody">
 <div id="container">
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
 </div>
</div>
Run Code Online (Sandbox Code Playgroud)

具有ID #leftNav#mainBodyare 的div 被设置为float:left,因此它们显示得很好.

我只想打印.pageBreak类,隐藏CSS #leftNav的其余部分#mainBody.

CSS:

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}
Run Code Online (Sandbox Code Playgroud)

css page-break

49
推荐指数
9
解决办法
8万
查看次数

滑块下的jQuery UI滑块标签

我只能使用jQuery 1.4.2和jQuery ui 1.8.5(这不是选择,请不要让我升级到最新版本).我创建了一个滑块,显示滑动条上方的当前值,但我现在需要的是一种方法来填充滑块下方与滑块相同距离的图例(即如果滑块宽度为100px且有五个值滑块将每20px捕捉一次.在本例中,我希望图例中的值以20px间隔放置.

这是我想要的一个例子:

滑块

这是我的jQuery(从ui滑块演示页面吸收):

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui jquery-ui-slider

38
推荐指数
4
解决办法
6万
查看次数

Bootstrap折叠不折叠

我正在尝试使用Bootstrap创建可折叠组件.我的代码是这样的

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

单击"可折叠组项目#1"时,应该折叠"panel-body"类中的项目,但不会产生单击效果.我直接从Bootstrap文档中复制了这段代码,但它仍无法正常工作.任何人都可以找出问题所在?

javascript css collapse twitter-bootstrap

25
推荐指数
7
解决办法
10万
查看次数

CSS只有3D旋转文字

我有一个带有文字旋转的div.如何获得文本深度以提供更好的3D效果?为了澄清,在90deg文本变得1px厚实,因为我们只能从侧面看到它 - 我如何制作它,例如,10px厚?此外,应显示适当的深度 - 即0deg我们看不到深度; 在45deg我们看到5px的深度; 在90deg我们看到完整的10px深度; 等等

我是一个CSS唯一的解决方案.

#spinner {
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  transform-style: preserve-3d;
  text-align:center;
}
@keyframes spinner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
Run Code Online (Sandbox Code Playgroud)
<p id="spinner">Stop, I'm getting dizzy!</p>
Run Code Online (Sandbox Code Playgroud)

css css-animations

22
推荐指数
2
解决办法
9822
查看次数

背景大小:封面不起作用?

这是我的页面http://inogroup.it/preload/index.htm

图像框的宽度是响应的

如何设置高度也要响应?像50%的屏幕?

如果我做这个改变:

.pattern{
    background-size: contain;
    margin-bottom:25px;
    width:100%;
    height:50%; 
}
Run Code Online (Sandbox Code Playgroud)

它不起作用

非常感谢你!

css height

16
推荐指数
5
解决办法
3万
查看次数

强制Canonical使用HTTPS

我希望我的客户部分是https,例如注册,登录,个人详细信息,订单详细信息等.我已经设置了包含https方案的路线(我可以通过https访问客户部分)但我不能强制我的链接使用https:

<a class="register" href="<?php echo $this->url('customer/default', array('controller' => 'registration', 'action' => 'index'), array('scheme' => 'https', 'force_canonical' => true,)); ?>">Register</a>
Run Code Online (Sandbox Code Playgroud)

我得到了什么: http://myproject.dev/customer/registration

我想要的是: https://myproject.dev/customer/registration

它似乎使用当前的方案 - 所以如果我在http上,那么网址是http,如果我在https上,那么网址是https.

我如何强制$this->url一直使用该https方案?

'router' => array(
  'routes' => array(
    'customer' => array(
      'type' => 'Zend\Mvc\Router\Http\Literal',
      'options' => array(
        'route' => '/customer',
        'scheme' => 'https',
        'defaults' => array(
          '__NAMESPACE__' => 'Customer\Controller',
          'https' => true,
          'controller' => 'Index',
          'action' => 'index',
        ),
      ),
      'child_routes' => array(
        'default' => array(
          'type' => 'Segment',
          'options' => …
Run Code Online (Sandbox Code Playgroud)

php zend-framework view-helpers zend-view zend-framework2

15
推荐指数
2
解决办法
964
查看次数

htaccess密码保护但不在localhost上

我已经设置了一个开发站点并希望对其进行密码保护,因此只有经过验证的访问者才能查看该站点.一切都很好.我很生气,在我的本地版本上输入我的用户名和密码.因此,如果不更改我的本地副本和开发站点上的htaccess文件,我如何密码保护站点,但允许自己访问而无需输入我的用户名和密码?

apache .htaccess localhost

12
推荐指数
1
解决办法
1万
查看次数

如何在jQuery中获得多选的optgroup?

我正在使用多选集合在一起的选项.

<select title="Fruits" multiple="multiple" id="fruits" name="fruits[]">
    <option selected="selected" label="All" value="">All</option>
    <optgroup label="" class="fruit">
        <option label="apple" value="1">Apple</option>
        <option label="pear" value="2">Pear</option>
        <option label="orange" value="3">Orange</option>
    </optgroup>
    <optgroup label="" class="berries">
        <option label="strawberry" value="4">Strawberry</option>
        <option label="raspberry" value="5">Raspberry</option>
        <option label="blueberry" value="6">Blueberry</option>
    </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)

我已经尝试过$(this).find("option:selected").parent().attr("label")只返回第一个选定选项的optgroup,这意味着如果选择了Strawberry和Pear,那么两个账户都将返回optgroup'.fruit'.

使用jQuery,如何获得每个选定选项的optgroup?

jquery multi-select optgroup

11
推荐指数
1
解决办法
2万
查看次数

Zend Form SetAction使用命名路由

我有一个表单,我正在尝试设置该操作.我想使用我在引导程序中创建的路径,在我的表单文件(扩展Zend_Form)中而不是在控制器或视图中声明操作.通常当我想使用路线时,我会做类似的事情

$this->url(array(), 'route-name');
Run Code Online (Sandbox Code Playgroud)

在视图中,或

$this->_helper->url(array(), 'route-name');
Run Code Online (Sandbox Code Playgroud)

在控制器中.

如何从Zend_Form中调用路由?


编辑:我已经放弃了尝试将路由加载到zend_form.也许在将来的版本中可能有一个功能可以轻松地做到这一点?

我已经为我的表单创建了一个viewScript并在其中设置了路径:在表单init函数中:

$this->setDecorators(array(
    'PrepareElements',
        array(
            'ViewScript', array(
                    'viewScript' => 'forms/formView.phtml'
            ))));
Run Code Online (Sandbox Code Playgroud)

并在视图文件中:

<form method="post" action="<?php echo $this->url(array(), 'route-name'); ?>" enctype="application/x-www-form-urlencoded">
    <?php
        foreach ($this->element->getElements() as $element)
        {
            echo $element;
        }
    ?>
</form>
Run Code Online (Sandbox Code Playgroud)

zend-framework zend-form zend-route

10
推荐指数
1
解决办法
6396
查看次数