Is it possible to make certain parts of an image transparent in HTML5/CSS

问题

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?

回答1:

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".

回答2:

DEMO

Check this Demo, you can do by adding a span tag and give absolute position add opacity. and also you can increase the opacity. Hope this is the one you are looking for. :)

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;

}

来源：https://stackoverflow.com/questions/26622143/is-it-possible-to-make-certain-parts-of-an-image-transparent-in-html5-css

标签

html

css

html5

css3