一篇文章带你了解CSS Opacity(透明度)

开发 前端
opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

[[354390]]

opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

一、跨浏览器透明度

现在,透明度(opacity )是CSS3规范的一部分,但是它存在了很长时间。但是,较旧的浏览器具有不同的方式来指定不透明度或透明度。

二、Firefox,Safari,Chrome,Opera和IE9中的CSS不透明度

当前浏览器中CSS不透明度的最新语法。

示例

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"
  5.         <title>CSS 透明度示例</title> 
  6.         <style> 
  7.             p { 
  8.                 opacity: 0.7; 
  9.                 padding: 10px; 
  10.                 background: #00ff00; 
  11.             } 
  12. </style> 
  13.     </head> 
  14.     <body style="background-color:aqua ;"
  15.         <p> 
  16.             这段文字70%不透明(或30%透明)。使用<code>opacity</code>值,看看它是如何工作的</p> 
  17.     </body> 
  18. </html> 

解析:

上面的样式规则将使段落元素70%不透明(或30%透明)。

opacity属性的取值范围为0.0到1.0。设置为opacity:?1;会使元素完全不透明(即0%透明),opacity:?0;而使元素完全透明(即100%透明)。

Internet Explorer 8及更低版本中的CSS透明度实现方法

Internet Explorer 8和更早版本支持仅Microsoft的属性“ alpha过滤器”来指定元素的透明度。

示例

  1. <style> 
  2.     p { 
  3.         filter: alpha(opacity=50); 
  4.         zoom: 1;  /* Fix for IE7 */ 
  5. </style> 

注:

IE中的Alpha过滤器接受从0到值100。该值0使元素完全透明(即100%透明),而该值100使元素完全不透明(即0%透明)。

三、兼容所有浏览器的CSS透明度

例:

  1. p { 
  2.     opacity: 0.5;  /* Opacity for Modern Browsers */ 
  3.     filter: alpha(opacity=50);  /* Opacity for IE8 and lower */ 
  4.     zoom: 1;  /* Fix for IE7 */ 

警告:

包括alpha过滤器以指定Internet Explorer 8和更低版本中的透明性,因为这是仅Microsoft的属性,而不是标准的CSS属性,所以在样式表中会创建无效的代码。

1. CSS图像透明度

还可以使用CSS Opacity制作透明图像。

下图中的三个图像均来自同一源图像。它们之间的唯一区别是它们的透明度。

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"
  5.         <title>项目</title> 
  6.         <style> 
  7.             div { 
  8.                 margin-right: 20px; 
  9.             } 
  10.             .img01{ 
  11.                 opacity: 1; 
  12.             } 
  13.             .img02{ 
  14.                 opacity: 0.5; 
  15.             } 
  16.             .img03{ 
  17.                 opacity: 0.25; 
  18.             } 
  19. </style> 
  20.     </head> 
  21.     <body style="background-color:aqua ;"
  22.         <div> 
  23.             <div style="float: left;"
  24.                 <img src="img/diamond.jpg" class="img01" /> 
  25.                 <p>opacity:1</p> 
  26.             </div> 
  27.  
  28.             <div style="float: left;"
  29.                 <img src="img/diamond.jpg" class="img02" /> 
  30.                 <p>opacity:0.5</p> 
  31.             </div> 
  32.             <div> 
  33.                 <img src="img/diamond.jpg" class="img03" /> 
  34.                 <p>opacity:0.25</p> 
  35.             </div> 
  36.         </div> 
  37.     </body> 
  38. </html> 

运行效果:

2. 透明框中的文字

在元素上使用不透明度时,不仅元素的背景将具有透明度,而且其所有子元素也将变为透明。如果不透明度的值变高,将使透明元素内部的文本难以阅读。

例:

  1. div { 
  2.     floatleft
  3.     opacity: 0.7; 
  4.     border: 1px solid #949781; 
  5. p { 
  6.     floatleft
  7.     position: relative
  8.     margin-left: -400px; 

为了防止这种情况,可以使用透明的PNG图像,也可以将文本块放在透明框的外面,然后使用负边距或CSS定位将其可视地推入内部。

四、总结

本文基于CSS基础,介绍了CSS Opacity改变图片透明度,不同的浏览器中的图片透明度改变的方法。浏览器的兼容性, 改变透明框中的文字,都通过案例的分析进行详细的讲解。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

代码很简单,希望能够帮助你更好的学习。

本文转载自微信公众号「 前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系 前端进阶学习交流公众号。

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2022-02-15 09:31:43

透明度CSS

2021-04-07 06:11:37

Css前端CSS定位知识

2021-01-25 05:39:54

Css前端Border

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS对齐文本

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平台

2020-11-17 11:10:21

CSS选择器HTML

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2021-05-20 09:02:59

CSS单位长度

2022-03-04 09:31:41

CSS前端属性选择器

2021-01-29 18:41:16

JavaScript函数语法

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2022-12-14 08:03:27

CSS变量前端

2020-12-18 05:40:37

CSS clearHtml

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时
点赞
收藏

51CTO技术栈公众号