CSS实现背景透明，文字不透明，兼容所有浏览器

前端开发作者： 2024-08-20 08:55:01

如何实现背景透明，文字不透明，兼容所有浏览器？我们平时调整的不透明度如图所示：实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法： css3的opacity:x，x 的取值从

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8
css3的rgba(red,green,blue,alpha)，alpha的取值从 0 到 1，如rgba(255,255,0.8)
IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

css的opacity

<!DOCTYPE html>
<htmlheadmeta charset="utf-8"/>
title>背景透明，文字不透明</style>
*{
    padding: 0;
    margin;
}
body 50px
    background red
.demo
  width200px
  margin0 auto
  padding 25px
  background-color#000000
  opacity 0.2
.demo p
    color #FFFFFF}
bodydiv class="demo">
    p>背景透明，文字也透明div>

css的rgba

/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */rgba(0,0.2);  IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
>

IE专属滤镜 filter:Alpha(opacity=x)

仅支持IE6、7、8、9，在IE10版本被废除
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明


  background#000
  filterAlpha(opacity=50) 只支持IE6、7、8、9 
  positionstatic IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 
  *zoom1 激活IE6、7的haslayout属性，让它读懂Alpha 
    position relative 设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明 >

全兼容的方案

/* 只支持IE6、7、8 */

@media \0screen\,screen\9 {...}

 rgba(0,0.5) IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 
  color
@media \0screen\,screen\9  只支持IE6、7、8 
  .demo{
    background-color
    filter
    *zoom*/
  
  .demo p 设置子元素为相对定位，可让子元素不继承Alpha值   
}
>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65427.html

相关资讯： CSS实现背景透明，文字不透明，兼容所有浏览器