最近遇到一个需求，如下图，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. 【转】为什么分布式一定要有Redis？

    发现一篇好文. https://studygolang.com/articles/15064

  2. Numpy 创建数组

    ndarray 数组除了可以使用底层 ndarray 构造器来创建外, 也可以通过以下几种方式来创建. numpy.empty numpy.empty 方法用来创建一个指定形状(shape),数据类型 ...

  3. Numpy Ndarray对象

    Numpy 最重要的一个特点是 N 维数组对象 ndarrary ,它是一系列同类型数据的集合,以 0 下标为开始进行集合中的索引. ndarray 对象是用于存放同类型元素的多维数组. ndarra ...

  4. oracle service name sid ， 用户 和 表空间

    oracle 的四个概念: 数据库: 就是一堆静态的数据文件.注意是静态的 instance 实例: 可以类比数据库连接. 实例就是为了操作数据库而开辟的进程和内存空间,有了这个实例你才能操作数据库. ...

  5. shell逻辑运算总结, 包括[[]]与[]的区别，&&与-a的区别，||与-o的区别

    1. 关于文件和目录 -f  判断某普通文件是否存在 -d  判断某目录是否存在 -b  判断某文件是否块设备 -c  判断某文件是否字符设备 -S  判断某文件是否socket(待修正) -L  判 ...

  6. Sorl 4.10 入门合集

    Sorl4.10 + Tomcat 7.0  win7环境下的安装 1.首先是到apache官网下载sorl 4.10 ,解压 2.进入路径\solr-4.10.4\example\webapps,拷 ...

  7. 关于下载calipso数据集以及用python将其读到记事本小结

    今天终于把老板交代的事情忙完了,对于我这位计算机语言的小白来说,其中的艰辛不用说,一把辛酸泪啊!在有计算机语言经验的老手而言,我这些问题似乎也不能算是问题,但我却卡了很久,对此,想把自己所遇到的困难和 ...

  8. linux下maven的安装

    上传安装包到相应路径 进行解压 tar -zxvf apache-maven-3.0.5-bin.tar.gz -C /export/servers/ 修改环境变量 vim /etc/profile ...

  9. 使用EasyUI的Datagrid的Editor进行行编辑，Enter回车结束编辑，并开启新的一行。

    //新增数据function add() { if (Index == undefined) { row = { move_date: '', start_time: '', end_time: '' ...

  10. centos7 防火墙相关命令

    启动:systemctl start firewalld禁用:systemctl stop firewalld重新载入规则:firewall-cmd --reload查看所有打开的端口:firewal ...