最近遇到一个需求，如下图，input框要有透明效果

　　

　　首先想到的方法是CSS3的 opacity属性，但事实证明我想的太简单了

　　这个属性虽然让input框有透明效果，同时文字和字体图标也会有透明效果，导致文字和字体图标被模糊，如下图

　　

　　于是我开始思考其它方式，最后想到了通过透明背景图来实现

　　背景图虽然能够解决问题，但会造成空div，并且还需要设置定位

　　感觉把简单的事情变得复杂了，我始终认为有更简单的方法

　　最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置

　　background-color: rgba(255,255,255,0.4);  这种方法在PC端不支持IE8及以下

　　注：上面截图的例子是在移动端，如果在PC端，要考虑 IE8 兼容的话，还需要用到 IE滤镜

　　　　如果你想要黑色透明背景，background-color:rgba(0,0,0,0.4);

　　　　

　　

　　　　如果要用上面这种方式 (255,255,255,0.4)，(0,0,0,0.4)，就只能用rgba，不能用rgb

　　下面附上一个demo供大家测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>背景透明，文字不透明</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .container {

           width: 100%;

            height: 400px;

            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542221600416&di=a1cf40bf75fea932e6f273bcfcbf6162&imgtype=0&src=http%3A%2F%2Fi1.img.969g.com%2Fpub%2Fimgx2018%2F05%2F15%2F503_232836_39b3e.jpg') no-repeat;

            background-size: cover;

            -webkit-background-size: cover;

            -o-background-size: cover;

            background-position: center 0;

        }

        .demo {

            position: absolute;

            width: 260px;

            height: 60px;

            top: 260px;

            line-height: 60px;

            text-align: center;

            background-color: rgba(255,255,255,0.4);

        }

        .demo p {

            color: #000;

            font-size: 18px;

            font-weight: 600;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="demo">

            <p>草薙金VS八神</p>

        </div>

    </div>

</body>

</html>

　　参考原文：http://www.php.cn/css-tutorial-404918.html

　　

　　

　　

CSS3实现背景透明文字不透明的更多相关文章

  1. css背景透明文字不透明

    测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...

  2. css3背景透明文字不透明

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...

  3. 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

    以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...

  4. css实现背景透明文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  5. div半透明背景，文字不透明

    background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...

  6. html 背景透明文字不透明

    .alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXIm ...

  7. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

随机推荐

  1. java、php、.net关于web开发的区别

    一提到web开发,目前在世界上流行性的三个帮派就是php,java和asp.net,这个世界上的百分之99的网站或者类似的应用都是由这三种语言的开发,这里请原谅我忽视某些小众语言如python之类.三 ...

  2. 处理 NCBI taxonomy tree

    1. etetoolkit : github 官网:https://github.com/etetoolkit/ete 官网:http://etetoolkit.org/ 2. taxonkit gi ...

  3. GUI学习之七——单选框QRadioButton和QButtonGroup的学习总结

    一.单选框QRadioButton的使用 1.类的描述 a.单选框按钮用于给用户提供若干选项中的单选操作,当一个被选中时,会自动取消选中的那个.(如果只有一个时可以通过单击该按钮改变其状态:而存在多个 ...

  4. .NET framework访问Oracle的几种方法

    首先介绍下开发环境:WIn10 64bit+Visual Studio 2015+Oracle10ClientWin32(只是客户端,如果安装整个数据库也是可以的) 目前了解C#中连接Oracle数据 ...

  5. RT-thread内核对象--事件集

    rt-thread 线程的同步:线程同步是指多个线程通过特定的机制(如互斥量,事件对象,临界区)来控制线程之间的执行顺序 1.事件集:(可以实现一对多,多对多的同步)   RT-Thread 定义的事 ...

  6. JSON.parse()和eval()的区别

    json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢? JSON.parse()之可以解析json格式的数据,并且会对要解析 ...

  7. Win10下 usart驱动PL2303无法安装的问题

    随着系统的 普及,很多小伙伴也放弃了原有的win7系统,加入了win10的行列.但是相对win7的稳定来说,win10还存在很多的不足 . 新买了一个usart的模块,但是在自家的电脑上使用的时候 一 ...

  8. Springboot & Mybatis 构建restful 服务二

    Springboot & Mybatis 构建restful 服务二 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务一 2 restful ...

  9. 解决vs验证控件报错” WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping”问题

    将RequiredFieldValidator的 EnableClientScript属性设置成 False 适用于大多验证控件

  10. SpringBoot_定制banner

    SpringBoot项目在启动时会打印一个banner 这个banner 是可以定制的, 在resources 目录下创建一个banner.txt 文件,在这个文件中写入的文本将在项目启动时打印出来. ...