How to set css transparency? Three ways to set transparency of CSS images

CSS transparency setting is often used in the design of web pages. Sometimes in order to design a web page to be more beautiful, images will be made transparent so that the content on the web page will not be invisible. Some The webpage will be more beautiful because the picture is used as the background. So, how to set the transparency in css? Today this article will share with you how to set the transparency of images in css.

There are two properties related to setting transparency effects in css: opacity and rgba. (Recommended video course:

css tutorial)

Below we will use these two attributes to set the effect of image transparency.

First let’s look at the example of setting the transparency of an image using the opacity attribute in css

css：

.opacity1, .opacity2, .opacity_img { display: inline-block; }
.opacity1 { filter: Alpha(opacity=0); }
.opacity2 { filter: Alpha(opacity=50); }
.opacity_img { filter: Alpha(opacity=100); }
:root .opacity1 { opacity: 0; filter: none; }
:root .opacity2 { opacity: .5; filter: none; }
:root .opacity_img { opacity: 1; filter: none; }

html：

<p>
    <a href="#" class="opacity2">
        <img class="opacity_img" src="
        " />
    </a>
</p>
<p>
    <a href="#" class="opacity2">
        <img  class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" / alt="How to set css transparency? Three ways to set transparency of CSS images" >
    </a>
</p>

The effect is as follows:

Note: Currently, mainstream browsers support the opacity:value writing method. The value ranges from 0 to 1, with 0 being completely transparent and 1 being completely opaque. However, this writing method is not supported in IE8 and previous versions, so we can solve it through filters. filter:alpha(opacity=value), value ranges from 0-100, 0 is completely transparent, and 100 is completely opaque. Just like the example above.

Let’s take a look at the example of rgba setting image transparency in css:

html:

<div class="demo2-bg">
    <div class="demo2">背景图半透明，文字不透明<br />方法：定位+ background:rgba(255,255,255,0.3)</div>
</div>

css:

.demo2-bg{
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
    background:rgba(255,255,255,0.3);

The effect is as follows:

Note: This method has good browser compatibility, and the image and content can be well separated to achieve a translucent background image effect, while the text, border and other styles and content are not affected. There is just one more layer of divs, using absolute positioning styles to achieve overlapping.

Set the background color value and transparency. The first three 255 represent RGB black, and 0.3 represents 30% transparency.

Finally, let’s take a look at how to set up the frosted glass effect of a picture:

<div class="demo1">背景图半透明，文字不透明<br />方法：背景图+ filter：blur</div>

.demo1{
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
}
.demo1:before{
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;/*-1 可以当背景*/
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

The effect is as follows:

##That’s it for this article It’s over. For more information on how to process CSS images, please refer to

css Manual

.
Related recommendations:

CSS mouse click to change image transparency_html/css_WEB-ITnose

image CSS realizes translucent boot page_html/css_WEB-ITnose

The above is the detailed content of How to set css transparency? Three ways to set transparency of CSS images. For more information, please follow other related articles on the PHP Chinese website!