了解关于CSS3不透明度

使您的背景透明

您可以在打印设计中轻松完成的任务之一是在图像或彩色背景上叠加文本，并更改​​该图像的透明度以使文本淡入背景。 但CSS3中有一个属性可以让你改变元素的不透明度，使它们淡入淡出：不透明。

如何使用不透明属性

不透明度属性采用从0.0到1.0的透明度值。

0.0是100％透明的，任何低于该元素的东西都会完全显示。 1.0是100％不透明 - 元素下面没有任何东西会显示。

因此，要将元素设置为50％透明，您可以编写以下内容：

不透明度：0.5;

看到一些不透明的实例

一定要在旧浏览器中测试

IE 6和7都不支持CSS3不透明属性。 但你并没有失败。 相反，IE支持仅Microsoft的属性alpha滤镜。 IE中的Alpha过滤器接受从0（完全透明）到100（完全不透明）的值。 因此，为了在IE中获得透明度，您应该将不透明度乘以100，并为样式添加alpha滤镜：

过滤器：alpha（不透明度= 50）;

查看实际使用的alpha滤镜（仅限IE）

并使用浏览器前缀

您应该使用-moz-和-webkit-前缀，以便老版本的Mozilla和Webkit浏览器也支持它：

-webkit-opacity：0.5;
-moz-opacity：0.5;
不透明度：0.5;

始终将浏览器前缀放在第一位，并将有效的CSS3属性放在最后。

在旧版Mozilla和Webkit浏览器中测试浏览器前缀。

你可以使图像透明

设置图像本身的不透明度，它会淡入背景。 这对背景图像非常有用。

如果你添加一个锚标签，你可以通过改变图像的不透明度来创建悬停效果 。

a：hover img {
过滤器：alpha（不透明度= 50）
filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 50）
-moz-opacity：0.5;
-webkit-opacity：0.5;
不透明度：0.5;
}

影响这个HTML：

测试上述样式和HTML。

在您的图片上放置文字

使用不透明度，您可以将文字放在图像上，并使图像在文本所在的位置显示淡出。

这种技术有点棘手，因为你不能简单地淡入淡出图像，因为这会褪色整个图像。 而且你不能淡入文本框 ，因为文本也会淡入。

1. 首先你创建一个容器DIV并将你的图像放在里面：

   
   

2. 按照图像与一个空的DIV - 这是你会变得透明。

   
   
   

3. 您在HTML中添加的最后一件事是带有文本的DIV：

   
   
   
   这是我的狗沙斯塔。 他不可爱！

4. 您使用CSS定位进行设计，将文本放置在图像上方。 我把文字放在左边，但你可以通过改变左边的两个来放在右边：0; 属性向右：0; 。

   ＃图片 {
   位置：相对;
   宽度：170像素;
   高度：128像素;
   余量：0;
   }
   #text {
   位置：绝对的;
   顶部：0;
   左：0;
   宽度：60像素;
   高度：118px;
   背景：#FFF;
   填充：5像素;
   }
   #text {
   过滤器：alpha（不透明度= 70）;
   filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 70）;
   -moz-opacity：0.70;
   不透明度：0.7;
   }
   #words {
   位置：绝对的;
   顶部：0;
   左：0;
   宽度：60像素;
   高度：118px;
   背景：透明;
   填充：5像素;
   }

看看它看起来如何