如何使用 CSS 设置文本或图像的透明度? 下面本篇文章就来给大家介绍一下使用 CSS 设置文本或图像的透明度的方法, 希望对大家有所帮助.
想要使用 CSS 设置文本或图像的透明度, 可以使用 opacity 属性来设置. opacity 属性用于调整文本或图片的透明度; 不透明度的值介于 0.0 到 1.0 之间, 其中低值表示高透明度, 高值表示低透明度. 不透明度百分比计算为 Opacity%=Opacity* 100.
语法:
- element {
- opacity: value;
- // CSS property
- }
示例 1: 设置图像透明
- <!DOCTYPE html>
- <HTML>
- <head>
- <title>
- Opacity 属性
- </title>
- <style>
- .forest { width: 350px; opacity: 0.5; } .opacity { padding-top:100px;
- text-align:center; } body { background:url(wind.jpg) no-repeat; background-size:cover;
- }
- </style>
- </head>
- <body>
- <div class="opacity">
- <img class="forest" src="1.jpg">
- </div>
- </body>
- </HTML>
效果图:
示例 2: 设置文本透明
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Opacity 属性
- </title>
- <style>
- .geeks { background: rgb(0, 153, 0); padding: 15px; text-align:center;
- width:300px; } #geek { padding: 15px; text-align:center; width:300px; }
- .rgba1 { background: rgba(0, 153, 0, 0.1); } .rgba2 { background: rgba(0,
- 153, 0, 0.5); } .rgba3 { background: rgba(0, 153, 0, 0.8); } .rgba4 { background:
- rgba(0, 153, 0, 1.0); } .g1 { float:left; margin-left:50px; } .g2 { margin-top:-40px;
- margin-left:50px; float:left; }
- </style>
- </head>
- <body>
- <div class="g1">
- <p style="font-size:24px;font-weight:bold;">
- 透明盒子
- </p>
- <div class="geeks" style="opacity:0.1;">
- <p>
- 10% opacity
- </p>
- </div>
- <div class="geeks" style="opacity:0.5;">
- <p>
- 50% opacity
- </p>
- </div>
- <div class="geeks" style="opacity:0.8;">
- <p>
- 80% opacity
- </p>
- </div>
- <div class="geeks">
- <p>
- 100% opacity
- </p>
- </div>
- </div>
- <br>
- <br>
- <div class="g2">
- <p style="font-size:24px;font-weight:bold;">
- rgba 颜色值
- </p>
- <div class="rgba1" id="geek">
- <p>
- 10% opacity
- </p>
- </div>
- <div class="rgba2" id="geek">
- <p>
- 50% opacity
- </p>
- </div>
- <div class="rgba3" id="geek">
- <p>
- 80% opacity
- </p>
- </div>
- <div class="rgba4" id="geek">
- <p>
- 100% opacity
- </p>
- </div>
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10314.html