这篇文章主要为大家分析了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);/*ie8以下写法*/
}
.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怎样实现图像的透明与不透明”就介绍到这了,更多相关内容可以搜索亿速云以前的文章，希望能够帮助大家答疑解惑，请多多支持亿速云网站！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
