在图像上创建CSS透明度蒙版

是否可以在CSS（f.ex：http://www.script-tutorials.com/demos/360/images/twinkling.png）中创建一个像这样的alpha蒙版，然后将其应用于下面的背景图像？在图像上创建CSS透明度蒙版

编辑： 我会给一些背景，因为我觉得我得到的答案不同的问题。上面链接的图像在图像顶部重叠了一些黑色圆圈。问题是它总是使用黑色，并且如果背景图像有黑色背景，它可以正常工作（它隐藏了bg图像）。如果背景图像有f.ex，问题就来了。一个蓝色的背景。然后图像将在bg图像上重叠黑色圆圈，并且不会产生预期掩蔽的效果。为了让一个想法：

那么，我想是让各界为Alpha通道，下面的图像的工作。因此，透明度不是黑色，而是黑色和白色，就像应用于下面图像的Alpha通道一样。

请注意，将会有2层：例如一张图片中的猕猴桃具有透明背景和黑色背景。或者图像中的狗和另一个蓝色图像下方的狗。所以我需要的是一个适用于猕猴桃或狗形象的面具。

来源

2017-03-02 user1156544

你可以尝试使用CSS3的'opacity'属性。不透明度可以从0.0变化到1.0。示例 '.image {不透明度：0.3; }' –

您可以创建一个 “格” 配有图片的背景，然后应用覆盖了它：

HTML：

<div class="myDiv"> 
    <div class="overlay"></div> 
</div>

CSS：这里

.myDiv{ 
    height:333px; 
    width:333px; 
    background:url('https://www.catamaransailing.holiday/blog/wp-content/uploads/2015/10/saltwistlebay-3-333x333.jpg'); 
} 
.overlay{ 
    position:relative; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.3); 
}

小提琴： https://jsfiddle.net/x0n9hj4z/

希望这就是你想要的。

来源

2017-03-02 12:10:09

这里是我的解决方案：

figure { 
 
    position: relative; 
 
} 
 
.ink::after { 
 
    content: url(http://www.script-tutorials.com/demos/360/images/twinkling.png); 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
}

<figure class="ink"> 
 
    <img src="http://placehold.it/100x100"> 
 
</figure>

不幸的是，大多数浏览器不支持pseudo-elements on img标签。

来源

2017-03-02 12:57:04 Tymek

在图像上创建CSS透明度蒙版

回答

相关问题