css或jQuery中的半透明效果？

Question

我一直在寻找能够实现半透明效果的CSS或jQuery。我所看到的大部分内容都是人们使用半透明作为透明的同义词，这并不是真正准确或我想要得到的。

我想要一个盒子，当这个盒子越过物体时，它会扭曲下面的物体。想一个浴室的窗户。它允许光线通过，但不是清晰的图像。我附上了一张图片，展示了我想要实现的目标。

我的想法是我会在顶部图像（示例图像中的白色框）上应用此效果，但它可能是其他内容。此外，我很确定这将是javascript，但我会选择CSS作为一个选项，以防有什么东西我不知道会产生这种类型的东西。

Answer 1

只需使用透明的PNG，特别是如果你需要像你的例子那样的纹理。

否则，您可以将内部div的opacity设置为某个值＆lt; 1

Answer 2

有人建议：

1. 如果您只需要将效果显示在图像上（而不是在html文本等上方）
2. 效果应显示的图像数量有限

然后，您可以在应用半透明效果的情况下准备每个图像的替代版本，然后使用效果框内的替代图像作为背景图像，其中背景位置根据框位置计算。

或者您可以考虑这种更复杂的方式：http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

Answer 3

延伸@Dryden Long提出的想法

以下是一个有效的示例：jsFiddle

您可以在GIMP / photoshop中创建图像的半透明版本。然后将子div的css background属性设置为fixed：

.parent-div {
     position:relative;
     background: url(normal.png) no-repeat 0 0 ;
}

.child-div {
   width: 100px;
   height:100px;
   background: url(distorted.png) no-repeat <X> <Y> ; /* x y relative to the parent*/
   background-attachment:fixed;
}

Answer 4

其他答案中列出的opacity或translucent image解决方案可以替代。您可以尝试使用带有filter效果的CSS3 blur：

img {
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

但请注意，这仍处于实验阶段，可能会发生变化。它还可能会受到所有浏览器供应商的支持。有关兼容浏览器的列表，请选中here。

来自 CanIUse 的

This列表也可能对您有所帮助。

此外，here是CSS过滤器的另一个优秀资源。

Answer 5

看起来好的候选人是jQuery Blur插件。似乎完全符合我的要求。感谢大家的建议。

http://www.blurjs.com/