是否可以使图像的某些部分在HTML5 / CSS中透明 [英] Is it possible to make certain parts of an image transparent in HTML5/CSS

问题描述

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

解决方案

这里是另一个CSS选项。它通过与背景尺寸共享固定背景，在背景和圆圈上模拟图像中的透明区域。当用于其他可以有像divs，headers，paragraph等背景的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-sizesrc =http://i.imgur.com/OaE8VAj.jpg/> 
< div class =circle-div>透明< br />效果< / div> 
< / div> 
< / div> 
  

另一个建议是使用内联图片作为demo-holder p>

I want to have an image on my page that has certain parts that are transparent, but not all of it. Is it possible to make just certain parts of an image/div transparent? For example, just a circle in the bottom right corner, or the top right portion?

解决方案

Here is another CSS option. It simulates a transparent area within an image by sharing a fixed background with background-size:cover on both the background and the circle. This technique also creates interesting effects when used for other html elements that can have a background like divs, headers, paragraphs...

JSFiddle

Main 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>

Another suggestion would be to use the inline image as a background on "demo-holder".

这篇关于是否可以使图像的某些部分在HTML5 / CSS中透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！