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 csscss:.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; }
<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>
<div class="demo2-bg"> <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div> </div>
.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);
<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); }
##That’s it for this article It’s over. For more information on how to process CSS images, please refer to
css Manual CSS mouse click to change image transparency_html/css_WEB-ITnoseimage CSS realizes translucent boot page_html/css_WEB-ITnoseThe 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!