专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络
免费热线：400-963-0016      微信咨询  |  联系我们
位置：网站建设 > 技术支持 > CSS 设置某元素的背景颜色透明_CSS学习
来源：网络整理     时间：2023/3/4 1:05:29    共 3631 浏览

要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的：

  1. background-color: rgba(0, 0, 0, 0.4);  

rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。



在 ie 中一般是这样的：



  1. background-color: rgb(0, 0, 0);  

  2. filter: alpha(opacity=40);  

opacity 表示透明度，它的值范围在 0～100 之间



那么如何兼容各浏览器呢？只要把它们写在一起就行了。

由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，一般也会忽略。

下面来个示例：

HTML 代码：



  1. <body>  

  2.     <div class="non-transparent">  

  3.         aaaaa  

  4.         </div>  

  5.     </body>  

  6.       

  7. <div class="transparent">  

  8.     <div class="box">  

  9.         box  

  10.         </div>  

  11.     </div>  


CSS 代码：


  1. .non-transparent:hover {  

  2.     background-color: yellow;  

  3. }  

  4.   

  5. .transparent {  

  6.     position: absolute;  

  7.     top: 0;  

  8.     left: 0;  

  9.       

  10.     text-align: center;  

  11.       

  12.     width: 100%;  

  13.     height: 100%;  

  14.       

  15.     filter: alpha(opacity=40);  

  16.     background-color: rgb(0, 0, 0);  

  17.       

  18.     background-color: rgba(0, 0, 0, 0.4);  

  19. }  

  20.   

  21. .box {  

  22.     background-color: yellow;  

  23.     width: 50%;  

  24.     height: 50%;  

  25.       

  26.     position: relative;  

  27.     left: 5%;  

  28.     top: 10%;  

  29. }  


显示效果：


chrome:


firefox:


opera:


ie8:



另外，在 chrome、firefox、opera 中也可以这样:

opacity: 0.4;

但是这样的话，会把所有子元素的透明度也设置为同样的值，效果如下图：


版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
·上一条：css图片居中(水平居中和垂直居中)_CSS学习 | ·下一条：CSS 兼容所有浏览器背景色透明 文字不透明CSS方法_CSS学习

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有