是否可以使圖像的某些部分在HTML5/CSS中透明

Question

我想在我的頁面上有一個圖像，其中某些部分是透明的，但不是全部。是否可以使圖像/ div的某些部分透明？例如，在右下角或右上角只有一個圓圈？

Answer 1

這裏是另外一個CSS選擇。它通過與背景大小：背景和圈共享固定背景來模擬圖像內的透明區域。用於可以有這樣的div，標題，段落背景其他HTML元素時，這種技術還創建有趣的效果......

JSFiddle

主要CSS

.main-background, .circle-div { 
    background-image:url(http://i.imgur.com/1aAo20a.jpg); 
    background-repeat:no-repeat; 
    background-position:center top; 
    background-attachment:fixed; 
    background-size:cover; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
} 

HTML

<div class="main-background"> 
    <div class="demo-holder"> 
     <img class="img-size" src="http://i.imgur.com/OaE8VAj.jpg" /> 
     <div class="circle-div">Transparent<br />Effect</div> 
    </div> 
</div> 

另一個建議是將內聯圖像用作「演示保持器」的背景。

Answer 2

DEMO

檢查本演示中，你可以通過添加一個span標籤做，並給予絕對位置添加透明度。也可以增加不透明度。 希望這是你正在尋找的人。 :)

HTML：

<div class="imgWrap"> 
    <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
    <span class="tranparentClass"></span> 
</div> 

CSS：

.imgWrap img{ 
    width:80%; 
    height:80%; 
    position:relative; 
    border:1px solid #900; 
} 
.tranparentClass { 
    opacity:.5; 
    border:1px solid #f00; 
    border-radius : 50%; 
    display:block; 
    padding:55px; 
    position:absolute; 
    top:0; 
    left:0; 
    background:#fff; 

}