刚开始出现的错误，内容会受到背景透明度改变的影响：如图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width:300px;

            height: 300px;

            margin: 50px auto;

            line-height: 300px;

            text-align: center;

            background: red;

            color: #000;

            font-size: 30px;

            -webkit-opacity: 0.2;

        }

    </style>

</head>

<body>

    <div class=“wrap”>

        我爱夏天

    </div>

</body>

</html>

解决方法一：

在div.wrap内再加一个div。作为蒙版，对其设置透明度的变化样式，并且让内容相对于wrap绝对定位，要记得给wrap设置相对定位！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            width:300px;

            height: 300px;

            margin: 50px auto;

            position: relative;

        }

        .con{

            width: 300px;

            height: 300px;

            background: red;

            -webkit-opacity: 0.2;

        }

        span{

            position: absolute;

            top: 150px;

            left: 100px;

            font-size: 30px;

            color: #000;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="con"></div>

        <span>我爱夏天</span>

    </div>

</body>

</html>

最后效果：

解决方法二：

用rgba()设置background的背景色和透明度样式。

    <style>

        div{

            width:300px;

            height: 300px;

            margin: 50px auto;

            line-height: 300px;

            text-align: center;

            background: rgba(250,18,18,0.2);

            color: #000;

            font-size: 30px;

        }

    </style>

最后效果：

可以明显看出使用CSS3的rgba（）要方便很多，节省大量代码，文档结构也更加清晰，不过rgba（）的兼容性问题也让让人头疼：

最后给出一个兼容性的解决方法：

.rgba {

  background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/

  background: rgba(0, 0, 0,0.5);

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */

 }

日常css技巧小结（1）--背景透明度改变对内容无影响的更多相关文章

  1. 日常css技巧小结（2）-- inline-block带来的迷惑

    一.问题描述 在平时布局中,inline-block使用的频率比很高,主要是因为可以让行标签设置宽高.我在布局过程中,发现了两个“问题”, 1行标签.display:inline-block之后的行标 ...

  2. scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )

    今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...

  3. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  4. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  5. Android之使用参数改变ProgressDialog的位置、大小、背景透明度、屏幕透明度

    废话不多说,这个改变ProgressDialog的一些配置属性和前面我讲的AlertDialog的设置参数方法一模一样,这里就为了更直观,直接贴实现代码吧: ProgressDialog mProgr ...

  6. CSS控制元素背景透明度总结

    方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColor ...

  7. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  8. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  9. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

随机推荐

  1. Spring基于AOP的事务管理

                                  Spring基于AOP的事务管理 事务 事务是一系列动作,这一系列动作综合在一起组成一个完整的工作单元,如果有任何一个动作执行失败,那么事务 ...

  2. 千呼万唤始出来，微软Power BI简体中文版官网终于上线了，中文文档也全了。。

    前几个月时间,研究微软Power BI技术,由于没有任何文档和资料,只能在英文官网瞎折腾,同时也发布了英文文档的相关文章:系列文章,刚好上周把文章发布完,结果简体中文版上线了.哈哈,心里有苦啊,早知道 ...

  3. WCF基础

    初入职场,开始接触C#,开始接触WCF,那么从头开始学习吧,边学边补充. SOA Service-Oriented Architecture,面向服务架构,粗粒度.开放式.松耦合的服务结构,将应用程序 ...

  4. 28个你必须知道的HTML5的新特性,技巧以及技术

    崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<f ...

  5. 统计iOS项目的总代码行数的方法

    打开终端, 用cd命令 定位到工程所在的目录,然后调用以下命名即可把每个源代码文件行数及总数统计出来: find . "(" -name "*.m" -or - ...

  6. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等）

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

  7. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  8. 如何区别exists与not exists?

    1.exists:sql返回结果集为真:not exists:sql不返回结果集为真.详解过程如图: exists not exists

  9. git图像化界面GUI的使用

    GIT学习笔记 一.        基础内容 1.git是一个版本控制软件,与svn类似,特点是分布式管理,不需要中间总的服务器,可以增加很多分支. 2.windows下的git叫msysgit,下载 ...

  10. 用apt-file解决找不到头文件的问题

    在编译C语言的开源项目的时候,经常会出现头文件找不到的问题. 解决这类问题有一个特别好用的工具apt-file 1.在ubuntu下安装 sudo apt install apt-file 2.更新索 ...