css怎样实现图像的透明与不透明

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要为大家分析了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>
　　<imgclass="lazy" data-src="img/t010c6ea3d87e5dcc351.jpg"/>
　　<divclass="background">
　　<divclass="transparent">
　　<p>filter:alpha</p>
　　</div>
　　</div>
　　</body>
　　</html>

css怎样实现图像的透明与不透明