在html中,如果是背景颜色,可以利用rgba()函数或者opacity属性来设置颜色透明度;如果是背景图片,可以利用opacity属性和“filter:opacity(%)”样式来设置图片透明度H 9 & Y – ?

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G~ 7 I 33电脑。

1、设置背景颜色的透明度i z m p +–利] w P ) n L : c *r Q = | + 4 = f Orgba()函数或者opacity属性

示例1:

<style>
#p1 {background-color:rgb(255,0,0,0.3);}
#p2 {background-coh l , K & _ llor:rgb(0,25? i = @ %5,0,0.3);}
#p3 {background-6 U 7 r U 9colW 6 * T B ? m kor:rgb(0,0,255,0.3);}
#p4 {background-color:rgf m H F 8b(192,192,192,0.3);}
#p5 {back6 % B Tground-color9 % j:rgb(255,255,0,0.3);}
#p6 {background-color:2 , : :rgY / V 9 b Sb(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB 颜色,并使用透明度:</p>
<p id="p1"E & S ~>红色</p>
<p iA | ld="pK ` j F + [ 3 O 92">O T 7 n C b P;绿色<& p s X d/p>
<p id="p3">蓝色<\ 9 y/p>
<p idP ` v d g ^ = K="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p>
</body&3 r agt;

效果F p H Z ( ~ L u K图:

1.png

示例2:

<style>
.demo{
width: 280px;
height: 140px;
margin: 50px auto;
}
.demo1,.demo2{
width: 120px;
height: 120px;
margin: 10px;
float: left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.d{ = S ; 1 8 = yemo2{
opN 6 w 0acity:0.5;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">
<p>背景色不透明,文字不透明!</p>
</div>
<div class="demo2"&x d i { V l 1 1gt;
<p>背景色透明,文字也透明j ; = 9 A!</p>
</div>
&l! A J L kt;/div>
</body>

效果图l + Y e N 5 : b

2.png

2、设置背景图片透明度–使用opacity属性和“filter:opacity(%)”样式

示例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<% h ( G q C d Zstyle>
div{
width: 300px;
height: 200px;
background-image: url(ih ` M H p i ` I Kmg/1.jpg);
background-size: 300px;
}
.div1{
-webkit-filter: opacity(z B Y { \ f & 350%); /* Chrome, Safari, Opera */
filter: opacity(50%)\ q 6 Z m h h a P;
}
.div2{
-webkit-filter: opacityC , r E Q(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
&l\ ? + 1 A X ` Qt;/head>
<m \ cbody>
<div>
<p>原图:</p>
</div>
<div class="div1">
<p>透明度为50%:</p>
</div>
<div class="div2">
&d ? S l h + G elt;p>透明度为20%:</p>8 + [ d } s ,;z 0 6 t E C = ^
</div>
</body>
</html>

1.png

示例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"P \ j o 7>
<style>
div{
width: 300px;
height: 200px;z L W | E
background-image:d } % % { L O url(img/1.jpg);
background-size: 300px;
}
.Z o _ L 9 Adiv1{
opacity: 0.5;
}
.div2{
opacity: 0.2;
}
</style>
</head>
&lI T c $t;body>
<div>
<p>原图:</p>
</div>
<div class="div1">
<p>透透明度为0.5:<s G q 8 v/p>
</div>
<div class="div2"&gE b V Vt;
<p>透明度为02:</p>
</div>
</body>
</html>

2.png

(学习, + A = p , \ J w视频分享:css视频教程、《html视频教程》)

以上就是html怎么设置背景透明度的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注