css中img不透明度的设置方法

这篇文章主要介绍css中img不透明度的设置方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

麒麟网站建设公司创新互联公司,麒麟网站设计制作，有大型网站制作公司丰富经验。已为麒麟成百上千家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的麒麟做网站的公司定做！

css img不透明度的设置方法：首先创建一个HTML和css示例文件；然后通过给指定img设置样式为“img{opacity:0.4;filter:alpha(opacity=40);}”即可。

通过 CSS 创建透明图像是很容易的。

注释：CSS opacity 属性是 W3C CSS 推荐标准的一部分。

创建透明图像 - Hover 效果

在本例中，当用户将鼠标指针移动到图片上时，会改变图片的透明度。

创建文本在背景图像上的透明框

本例创建了一个包围文本的半透明框。

实例 1 - 创建透明图像

定义透明效果的 CSS3 属性是 opacity。

首先，我们将展示如何通过 CSS 来创建透明图像。

常规图像：

带有透明度的相同图像：

请看下面的 CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

实例 2 - 图像透明度 - Hover 效果

请把鼠标指针移动到图像上：

CSS 是这样的：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

第一个 CSS 代码块类似实例 1 中的代码。此外，我们已经设置了当鼠标指针位于图像上时的样式。在这个例子中，当指针移动到图像上时，我们希望图像是不透明的。

对应的 CSS 是：opacity=1。

IE8 以及更早的浏览器：filter:alpha(opacity=100)。

当鼠标指针移出图像后，图像会再次透明。

实例 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.

源代码是这样的：

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.