1 图片库
div {
text-align: center;
float: left;
margin: 20px;
border: 1px solid #bebebe
}
img {
margin: 5px;
border: 1px solid #bebebe
}
img:hover {
border: 1px solid #333
}
p {
font-size: 10px;
margin: 10px
}
运行效果：
2 图片透明
定义透明效果的属性是 opacity。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
img { opacity: 0.5 }
运行效果：
3 图片透明 hover效果
img:hover { opacity: 1 }
运行效果：
如上指针移动到图像上时，图像是不透明的。指针移出图像后，图像会再次透明
4 文本在背景图上透明
.div1 {
width: 430px;
height: 460px;
border: 1px solid;
background: url(../img/xfwn6.jpg)
}
.div2 {
width: 370px;
height: 400px;
margin: 30px;
background-color: #FFF;
opacity: 0.6
}
p {
text-indent: 2em;
font-size: 25px;
padding: 30px
}
运行效果：
