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

代码：

<!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. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  2. 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新

    上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...

  3. 从Membership 到 .NET4.5 之 ASP.NET Identity

    我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然后深入学习了Membership的架构设计.正所谓从实践从来,到实践从去,在我们把Membership的结构吃透之后,我们要 ...

  4. 移动先行之谁主沉浮？ 带着你的Net飞奔吧！

    移动系源码:https://github.com/dunitian/Windows10 移动系文档:https://github.com/dunitian/LoTDotNet/tree/master/ ...

  5. WebSocket - ( 一.概述 )

    说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...

  6. Oracle第一步

    Oracle 启动数据库 Startup [NOMOUNT|MOUNT|OPEN|FORCE] [restrict] [pfile=filename] 启动实例,加载数据库,启动数据库 oRACLE关 ...

  7. 【centos7常用技巧】RPM打包

    一.RPM打包的目的 1.当目标机中不存在编译环境时,可以先在本地环境中编译打包,然后直接在目标机中用rpm -ivh *.rpm安装即可. 2.当需要在目标机中安装多个软件或者增加多个文件时,可以将 ...

  8. MongoDB学习笔记二—Shell操作

    数据类型 MongoDB在保留JSON基本键/值对特性的基础上,添加了其他一些数据类型. null null用于表示空值或者不存在的字段:{“x”:null} 布尔型 布尔类型有两个值true和fal ...

  9. Orcale 三层嵌套分页代码

    select * from( select emp.*,rownum a from ( select * from emp ) emp where rownum<7) where a>3

  10. Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...