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

Question

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

Answer 1

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;

}

Answer 2

这是另一个CSS选项。 它通过在背景和圆圈上共享一个背景为background-size：cover的固定背景来模拟图像中的透明区域。 当用于其他具有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 3

在这个美好的2022年未来世界，你现在可以使用mask-image来实现这样的效果：

img {
  mask-image: linear-gradient(to left, transparent 5%, black);
}

https://codepen.io/reynoldsalec/pen/OJOwZmV

请注意，尽管所有现代浏览器都应支持mask-image ，但我注意到有时它需要添加前缀（例如： -webkit-mask-image ）。