是否可以使图像的某些部分在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; 

}