在圖像上創建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透明度蒙版

回答

相關問題