图片

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

}

运行效果：