这篇文章主要为大家分析了CSS怎样实现图像的透明与不透明的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“css怎样实现图像的
这篇文章主要为大家分析了CSS怎样实现图像的透明与不透明的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“css怎样实现图像的透明与不透明”的知识吧。
1.图像透明不透明用到opacity元素，值为0到1，一般用0.4或0.6就够了。
2.ie8以下浏览器写法为：filter:alpha(opacity=40);值为0到100.一般为了兼容同时写两种。
3.用法有两种，第一直接写在图片上增加图片的模糊程度（相当于灰色蒙版）；第二把图片写在背景p里，嵌套p写带有颜色的蒙版，里面还可以加文字。具体写法如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
img{
width:400px;
height:300px;
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover{
opacity:1;
filter:alpha(opacity=100);
}
.background{
background:url('img/t01753ed63Dad21cb88.jpg')no-repeat;
width:400px;
height:300px;
}
.transparent{
width:400px;
height:300px;
background-color:#f941f3;
opacity:0.4;
filter:alpha(opacity=40);
}
.transparent:hover{
opacity:0;
filter:alpha(opacity=0);
}
p{
font-size:48px;
display:block;
color:white;
text-align:center;
line-height:300px;
}
</style>
</head>
<body>
<imgsrc="img/t010c6ea3d87e5dcc351.jpg"/>
<divclass="background">
<divclass="transparent">
<p>filter:alpha</p>
</div>
</div>
</body>
</html>
css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
关于“css怎样实现图像的透明与不透明”就介绍到这了,更多相关内容可以搜索编程网以前的文章，希望能够帮助大家答疑解惑，请多多支持编程网网站！
--结束END--
本文标题: css怎样实现图像的透明与不透明
本文链接: https://www.lsjlt.com/news/88440.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0