Javascript css或jQuery中的半透明效果？

我一直在搜索一些CSS或jQuery，它们可以实现半透明效果。我所看到的大部分是人们使用半透明作为透明的同义词，这并不准确，也不是我想要得到的

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

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

---

只需使用一个透明的PNG，特别是如果您需要像您的示例那样的纹理

---

否则，您可以将内部div的

不透明度
设置为某个值<1
，只需使用透明的PNG即可，特别是如果您需要类似示例的纹理

否则，您可以将内部div的
不透明度设置为某个值<1
这是@Dryden Long提出的想法的扩展

以下是一个工作示例：

您可以在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;
}

.parent div{
位置：相对位置；
背景：url（normal.png）不重复0；
}
.儿童组{
宽度：100px；
高度：100px；
背景：url（扭曲的.png）无重复；/*x y相对于父项*/
背景附件：固定；
}
对@Dryden Long提出的想法的延伸

以下是一个工作示例：

您可以在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;
}

.parent div{
位置：相对位置；
背景：url（normal.png）不重复0；
}
.儿童组{
宽度：100px；
高度：100px；
背景：url（扭曲的.png）无重复；/*x y相对于父项*/
背景附件：固定；
}
除了其他答案中列出的
不透明度
或
半透明图像
解决方案，还有一种替代方案。您可以尝试使用具有模糊效果的CSS3
过滤器
：

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

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

CanIUse的列表也可能有助于您查看

此外，还有一个很好的CSS过滤器资源。
除了其他答案中列出的
不透明度
或
半透明图像
解决方案之外，还有另一种选择。您可以尝试使用具有模糊效果的CSS3
过滤器
：

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

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

CanIUse的列表也可能有助于您查看

此外，还有一个很好的CSS过滤器资源。
jQuery Blur插件似乎是一个很好的候选者。似乎正是我想要的。谢谢大家的建议

jQuery模糊插件似乎是一个很好的候选插件。似乎正是我想要的。谢谢大家的建议

正如建议的那样：

如果您只需要效果出现在图像上（而不是html文本等的顶部）
效果应该显示在上面的图像数量是有限的
然后，您可以准备应用半透明效果的每个图像的替代版本，然后将效果框内的替代图像用作背景图像，其中背景位置基于框位置计算

或者你可以用更复杂的方式来研究：
正如建议的那样：

如果您只需要效果出现在图像上（而不是html文本等的顶部）
效果应该显示在上面的图像数量是有限的
然后，您可以准备应用半透明效果的每个图像的替代版本，然后将效果框内的替代图像用作背景图像，其中背景位置基于框位置计算

或者你可以用更复杂的方法来研究：
你可以使用画布来计算结果。这种效果不会以本机方式实现。寻找玻璃效果算法我能想到的唯一一件事就是用一个半透明的.png图像作为盒子的背景…请参阅下面我的答案，了解使用图像和CSSY的解决方案。你可以使用画布并计算结果。这种效果不会以本机方式实现。寻找玻璃效果算法我能想到的唯一一件事就是使用半透明的.png图像作为盒子的背景…请参阅下面我的答案，了解使用图像的解决方案，cssI已经尝试过使用该方法，但我遇到的问题是，当纹理png不在任何对象上时，它的可见性。就像坐在白色背景上一样，你仍然可以看到纹理。我认为这必须类似于jQuery监听滚动并检查下面的对象，在它们重叠的地方对它们应用一些效果。不透明度影响背景的透明度，不会创建半透明效果。没有不透明度或透明PNG，就无法做到这一点。我建议使用PNG，并将“hover”元素剪切到父图片的边框上。在包装照片的div上设置
overflow:hidden
，并使内部div成为子元素。那样的话，它在div外就永远看不见了我并不是说我不能或不会使用不透明，我意识到这就是goi