最近遇到一个需求，如下图，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. EL表达式、JSTL标签库

    一.EL(Expression Language)表达式 语法结构:${var} 若要停用对EL表达式的评估的话,需要使用page指令将isELIgnored属性值设为true: <%@ pag ...

  2. HDU2034

    #include <bits/stdc++.h> using namespace std; int main() { int n,m,val; set<int>::iterat ...

  3. 处理 NCBI taxonomy tree

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

  4. How to get raw request body in ASP.NET?

    protected void Page_Load(object sender, EventArgs e) { MemoryStream memstream = new MemoryStream(); ...

  5. C++ vector动态数组

    #include<vector>头文件 vector类称作向量类 百度百科的解释:https://baike.baidu.com/item/vector/3330482 我喜欢把知识点拿出 ...

  6. 使用kbmmw中的随机数替换delphi 10.3 自带的随机数

    我们在开发中经常会使用随机数模拟各种随机条件,例如生成唯一的密码和令牌. 在计算机中,一般采用PRNG(伪随机序列发生器)模拟真实随机数.既然是随机,就要要没有任何规律, 在取值范围内均匀.独立.以确 ...

  7. css摘要

    由于需要,今天花三个小时了解一下css,在此记录一些摘要: 参考w3school 1. 当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢? 一般而言,所有的样式会根据下面的规则层叠于一个 ...

  8. Ubuntu修改系统时间

    在新版的ubuntu中,使用timedatectl 替换了ntpdate来进行时间管理. 1.查看当前时间状态 查看当前时间状态 timedatectl status : res@ubuntu:~$ ...

  9. PowerShell工作流学习-7-编写脚本工作流帮助

    关键点: a)工作流中不支持基于注释的帮助(标识工作流的帮助文件的 .ExternalHelp 注释除外). b)支持get-help参数的方式:使用 .ExternalHelp 注释以便 Get-H ...

  10. Runnable和Callable 的区别

    Runnable和Callable 的区别 01.Runnable接口中只有一个run()没有返回值 没有声明异常   Callable接口中只有一个call()有返回值 有声明异常 02.Calla ...