创建透明的图像或者背景

创建透明的图像

自定义透明效果的属性是opacity(中文意思:不透明

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

而IE8及更早的版本中用滤镜:

filter:alpha(opacity=x) x取值从0到100。值越小越透明。

图像hover效果

将鼠标放在图片上时,可以显示清晰的图片。

img
{
opacity:0.4;
filter:alpha(opacity=40)
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}

创建透明框中的文本(即具有透明的文本)

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width:400px;
height:266px;
margin:15px;
background:url no-repeat;
border:1px solid black;
}
div.transbox
{
width:338px;
height:204px;
margin:30px;
padding:1px;
background:white;
border:1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
color:black;
font:bold 13px verdana,geneva,sana-serif;
line-height:1.5;
}

</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>

</P>
</div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_41060905/article/details/81198717