CSS 透明度的设置在网页的设计中是经常需要用到的, 有时为了设计出的网页更加的美观, 会对图片进行透明化处理, 那么图片透明度怎么设置? 下面本篇文章就来给大家介绍一下使用 CSS 设置图片透明度的方法, 希望对大家有所帮助.
1, 使用 opacity 属性
opacity 属性设置元素的不透明级别, 属性值从 0.0 (完全透明)到 1.0(完全不透明).
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- .opacity1 {
- opacity: 0.5;
- filter: none;
- }
- .opacity2 {
- opacity: 0.2;
- filter: none;
- }
- </style>
- </head>
- <body>
- <div>
正常图片:<br /><br />
- <img src="1.jpg" width="300px" /></div><br />
- <div>
设置透明度的图片:<br /><br />
- <img class="opacity1" src="1.jpg" width="300px" />
- <img class="opacity2" src="1.jpg" width="300px" />
- </div>
- </body>
- </HTML>
效果图:
2, 使用 filter 属性
filter 属性是将过滤器效果应用于 web 页面上的元素 (主要是图像) 的 CSS 方法; 可以通过设置 opacity()值, 来设置图像的不透明度效果. 0%不透明度表示元素完全透明, 如果不透明度为 100%, 则表示原始图像.
语法:
filter: opacity();
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- .opacity1 {
- -webkit-filter: opacity(50%);
- /* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */
- filter: opacity(50%);
- /* 转化图像的透明程度. 值定义转换的比例. 值为 0% 则是完全透明, 值为 100% 则图像无变化. */
- }
- .opacity2 {
- -webkit-filter: opacity(20%);
- /* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */
- filter: opacity(20%);
- /* 转化图像的透明程度. 值定义转换的比例. 值为 0% 则是完全透明, 值为 100% 则图像无变化. */
- }
- </style>
- </head>
- <body>
- <div>
正常图片:<br /><br />
- <img src="1.jpg" width="300px" />
- </div><br />
- <div>
设置透明度的图片:<br /><br />
- <img class="opacity1" src="1.jpg" width="300px" />
- <img class="opacity2" src="1.jpg" width="300px" />
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/12802.html