zoukankan      html  css  js  c++  java
  • 【前端】CSS背景透明文字不透明(全浏览器兼容)

    ✨背景透明文字不透明

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>背景透明,文字不透明</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            body {
                padding: 50px;
                background: url(1.jpg) 0 0 repeat;
            }
    
            .demo {
                padding: 25px;
                background-color: rgba(0, 0, 0, 0.5); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
            }
    
            .demo p {
                color: #FFFFFF;
            }
    
            @media screen\,screen9 {
                /* 只支持IE6、7、8 */
                .demo {
                    background-color: #000000;
                    filter: Alpha(opacity=50);
                    position: static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
                    *zoom: 1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
                }
    
                .demo p {
                    position: relative; /* 设置子元素为相对定位,可让子元素不继承Alpha值 */
                }
            }
    
        </style>
    </head>
    <body>
    
    <div class="demo">
        <p>背景透明,文字不透明</p>
    </div>
    
    </body>
    
    </html>
    

    ✨参考及引用

    https://www.cnblogs.com/PeunZhang/p/4089894.html


    ⭐转载请注明出处

    本文作者:双份浓缩馥芮白

    原文链接:https://www.cnblogs.com/Flat-White/p/15309833.html

    版权所有,如需转载请注明出处。

  • 相关阅读:
    图片点击后直接下载
    输入网址到页面呈现,以及首屏加载
    RESTful
    html语义化标签
    git 初学解决错误
    爬虫
    Scrapy安转遇到问题
    前端补充
    django-ORM
    django-web聊天
  • 原文地址:https://www.cnblogs.com/Flat-White/p/15309833.html
Copyright © 2011-2022 走看看