css如何设置img的不透明度?

使用CSS很容易创建透明的图像;那么css如何设置img的不透明度?下面本篇文章给大家介绍一下CSS 图像透明/不透明。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法1:使用opacity属性设置img的不透明度

Opacity属性设置一个元素了透明度级别。

首先,我们将向您展示如何用CSS创建一个透明图像。

正常的图像

1.jpg

相同的图像带有透明度:

2.png

看看下面的CSS:

 img
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }

IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。

IE8和早期版本使用滤镜: filter:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。

方法2:使用filter:opacity(%)设置img的不透明度

filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

值:

  • opacity(%)

    转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			img {
				-webkit-filter: opacity(50%);
				/* Chrome, Safari, Opera */
				filter: opacity(100%);
			}
		</style>
	</head>

	<body>

		<p>设置img的不透明度:</p>

		<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

		<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>

	</body>

</html>

效果图:

1.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是css如何设置img的不透明度?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏