您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

纯CSS实现背景透明,文字不透明的方法

发布时间:2017-11-18编辑:余斗阅读:(0)字号:
    医院网站的移动端要做一个banner滚动图,我想把每个banner图的标题也显示出来,直接把文字写在图片底部上会很突兀,需要做一个半透明的背景来放文字。于是百度了一些方法,发现很多方法虽然在我所用的浏览器上有效,但是到低版本的浏览器上则无效。很苦恼,仔细研究了一下css代码后终于找到解决方法,接下来就教大家如何用现纯CSS实现背景透明,文字不透明(兼容所有浏览器)。 首先,余斗所说的透明代表背景透明,在PS里表现是这样的: 纯CSS实现背景透明,文字不透明的方法 实现透明的CSS方法通常有以下三种方式,以下案例余斗用不透明度都为50%的写法来表示,一一列举出来: html代码为:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯CSS实现背景透明,文字不透明的方法Demo预览</title>
    </head>

    <body>
    <div class="demo">
            <p>背景透明,文字不透明</p>
    </div>
    </body>
    </html>
     
    一、css3的opacity:x,x 的取值可以从 0 到 1,如opacity: 0.5代表透明度为50%。兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持。代码为:

    *{
            padding: 0;
            margin: 0;
    }
    body{
            padding: 50px;
            background: #f0799a;
    }
    /*css3的opacity*/
    .demo{
        margin-bottom:20px;
        padding: 30px;
        background-color:#000000;
        opacity: 0.2;
    }
    .demo p{
            color: #FFFFFF;
    }
     
    使用opacity后整个模块都透明了,展现如下: 纯CSS实现背景透明,文字不透明的方法 这个方法明显不是余斗想要的结果,故不可取。 二、css3的rgba,使用这个值可以设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持。代码为:

    *{
            padding: 0;
            margin: 0;
    }
    body{
            padding: 50px;
            background: #f0799a;
    }
    /*css3的rgba*/
    .demo{
        margin-bottom:20px;
        padding: 25px;
        background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
        background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
    }
    .demo p{
            color: #FFF;
    }
     
    在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,是余斗想要的效果,但是在IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba,解析后颜色为透明,并不是余斗想要的效果,展现如下: 纯CSS实现背景透明,文字不透明的方法 IE9版本以上浏览器显示效果 纯CSS实现背景透明,文字不透明的方法 IE6和部分IE7内核的浏览器显示效果 既然低版本的IE内核浏览器不支持,那么这个方法也不适合余斗。 三、IE专属滤镜 filter:Alpha(opacity=x),这个属性只适合低版本的IE浏览器,是IE浏览器专属,但是使用的时候要注意以下问题: 1. 仅支持IE6、7、8、9,在IE10版本被废除 2. 在IE6、7中,需要激活IE的haslayout属性(如:*zoom:1或者*overflow:hidden),让它读懂filter:Alpha 3. 在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位,可让子元素不透 代码为:

    *{
            padding: 0;
            margin: 0;
    }
    body{
            padding: 50px;
            background: #f0799a;
    }
    /*IE专属滤镜 filter*/
    .demo{
        margin-bottom:20px;
        padding: 25px;
        background: #000;
        filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
        position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
        *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
    }
    .demo p{
            color: #FFF;
            position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明 */
    }
     
    展示效果如下: 纯CSS实现背景透明,文字不透明的方法 IE9版本以上浏览器显示效果 纯CSS实现背景透明,文字不透明的方法 IE6和部分IE7内核的浏览器显示效果 通过以上三种方法,不难发现,并没有哪种方法可以完美的兼容所有版本浏览器 ,但是我们针对IE6、7、8浏览器,可以采用fiter:Alpha,而针对高版本的浏览器我们采用rgba。然后,又有问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度,也算是一个bug。 此时,我们需要做一个判断,根据不同浏览器输出不同css代码,则完美解决问题:

    *{
            padding: 0;
            margin: 0;
    }
    body{
            padding: 50px;
            background: #f0799a;
    }
    /*IE专属滤镜 filter+css3的rgba完美兼容方法*/
    .demo{
        margin-bottom:20px;
        padding: 25px;
        background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
    }
    .demo p{
        color: #FFF;
    }
    @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
        .demo{
            margin-bottom:20px;
            background-color:#000;
            filter:Alpha(opacity=50);
            position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
            *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
        }
        .demo p{
            position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
        }
    }
     
    展示效果如下: 纯CSS实现背景透明,文字不透明的方法 IE专属滤镜 filter+css3的rgba完美兼容方法 至此,我们可以得出最佳的解决方案来实现背景透明,文字不透明,文章所用方法可以在Demo中预览,Demo地址为:Demo在线预览
关键字词CSS背景透明
余斗余斗
  1. 转载请注明:纯CSS实现背景透明,文字不透明的方法
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-11-18最后更新
上一篇:将网页变成黑白灰色调CSS代码推荐 下一篇:没有了
将网页变成黑白灰色调CSS代码推荐
没有了
手机扫一扫 随身带着看
鸿运国际手机登录首页