Html中图片透明度的命令,CSS 图像透明度

实例 3 - 透明框中的文本

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

源代码是这样的：

div.background

{

width: 400px;

height: 266px;

background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;

border: 1px solid black;

}

div.transbox

{

width: 338px;

height: 204px;

margin:30px;

background-color: #ffffff;

border: 1px solid black;

/* for IE */

filter:alpha(opacity=60);

/* CSS3 standard */

opacity:0.6;

}

div.transbox p

{

margin: 30px 40px;

}

This is some text that is placed in the transparent box.

This is some text that is placed in the transparent box.

This is some text that is placed in the transparent box.

This is some text that is placed in the transparent box.

This is some text that is placed in the transparent box.

首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。