1 圖片庫(kù)
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
}
運(yùn)行效果：
2 圖片透明
定義透明效果的屬性是 opacity。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小，越透明。
img { opacity: 0.5 }
運(yùn)行效果：
3 圖片透明 hover效果
img:hover { opacity: 1 }
運(yùn)行效果：
如上指針移動(dòng)到圖像上時(shí)，圖像是不透明的。指針移出圖像后，圖像會(huì)再次透明
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
}
運(yùn)行效果：
