小编lit*_*man的帖子

我正在使用一个非常精美的webkit过滤器来制作背景图像灰度,并将鼠标悬停在图像上变成颜色.

这是过滤器

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

正如您所看到的,甚至还有一个"过渡"属性,使图像具有平滑的渐变过渡到全彩色.我遇到的问题是我正在应用它的div也影响位于div内部的子文本,也将文本转换为灰度.这是一个问题,因为文本需要是白色的,即使没有被盘旋.

我试过用子文本上的另一个来否定过滤器,但它似乎不起作用......看看小提琴

小提琴http://jsfiddle.net/yMHm4/1/

我的网站上有一个透明的 gif动画。

理想情况下，我希望它播放一次动画，然后重复其中包含整个徽标的几帧，但看起来单个 gif 无法完成此操作。

做了一些研究，看起来我有几个选择，但我不确定在这种情况下什么是最好的。

1. 使用 javascript 对 gif 进行计时，然后在应该播放完毕时交换图像。这看起来非常不可靠，并且在慢速连接上它可能根本无法像我想要的那样运行。我认为没有其他方法可以检测 gif 动画何时完成播放，但我可能是错的。

2. 使用 gif 以外的格式也许可以为我完成此任务。

3. 编辑 gif，使其只播放一次，并使最后一帧成为我想要的静止图像。这会删除任何动画，我宁愿选择手绘的动画感觉，但我有一种感觉，我可能最终会这样做。

4. 不知何故，找到一个纯 javascript/svg + 路径解决方案，这似乎非常困难，而且我根本无法相对快速地完成。

有没有人遇到类似的问题有什么建议？

我正在尝试创建一个网站,它将调整表格元素表格单元格相对于窗口大小的大小,以便它始终适合窗口内部.这就是我所拥有的:

.table {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.tablecell {
  display: table-cell;
}

以及下面的CSS

<div class="table">
  <div class="tablecell">
    <image src="fb.png">
  </div>
  <div class="tablecell">
    <image src="twitter.png">
  </div>
  <div class="tablecell">
    <image src="youtube.png">
  </div>
  <div class="tablecell">
    <image src="apple.png">
  </div>
  <div class="tablecell">
    <image src="email.png">
  </div>
</div>

弄乱这个的是宽度:100%......这是结果的图片.我把问题空间用蓝色圈起来.忽略Soulja男孩的脸.

基本上我只是想要正确居中,以便youtube图像位于页面中间.使用width:100%创建的空间可以防止这种情况,但我想使用这个或类似的属性,以便表格始终适合窗口.

我找不到任何快速答案。display: flex;在表格行（<tr>）元素上使用很酷吗？

感觉不对。但是，如果没有兼容性问题，我会做

这是我正在谈论的代码

input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

input[type="radio"]:checked+label,
input[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}

input[type="radio"]:checked+label:before,
input[type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

input[type="radio"]:checked+label:after,
input[type="radio"]:not(:checked)+label:after {
  content: '';
  width: 14px;
  height: 14px;
  background: #fc8f3f;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: …

我正在尝试更改此处的W3C灰度过滤器:http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent

这在webkit上非常简单,但我只是使用它,因为Gecko只支持通过过滤器调用过滤器:CSS中的url(filter.svg).我对SVG没有多少经验,而且我几次搞砸了它们,它们的百分比值非常明显,但灰度级值更复杂一些.

所以这是SVG文件中的代码.

 <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</svg>

具体来说,我希望将其灰度显示为90%,因此只有10%的颜色可见,但我不知道这个过滤器是如何工作的.我在这里找到了这个文件http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent应该有意义

所以我像这样使用 jQuery 脚本；

$(window).scroll(function(){
    $(".element").css("opacity", 1 - $(window).scrollTop() / 700);
  });

隐藏绝对定位的 flexbox 元素，因为它滚动到页面顶部之外。我在页面下方还有其他内容，我想对其应用相同的规则集；我希望它们在页面底部可见时保持 100% 不透明度，然后在用户滚动时让它们淡出，但这似乎只适用于最初显示在窗口中的第一个元素。我不确定为什么会这样 - 我已经尝试过这个700值，但对于页面下方的元素来说，它似乎永远不准确。

这是一个 jsfiddle

我正在做的内容是文本和图像。我认为这可能无法以我希望的方式实现 - 如果我能让它工作，理想情况下，文本块会从顶部到底部淡出，而不是一次淡出整个元素，但我明白用这种方法可能是不可能的。