这篇文章主要为大家分析了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的选择器有哪些
css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
关于“css怎样实现图像的透明与不透明”就介绍到这了,更多相关内容可以搜索编程网以前的文章,希望能够帮助大家答疑解惑,请多多支持编程网网站!