CSS3实现背景透明文字不透明
最近遇到一个需求，如下图，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实现背景透明文字不透明的更多相关文章
- css背景透明文字不透明
测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...
- css3背景透明文字不透明
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...
- 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...
- css实现背景透明文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- div半透明背景，文字不透明
background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...
- html 背景透明文字不透明
.alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXIm ...
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css实现背景半透明文字不透明的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
随机推荐
- 在Centos7下搭建Socks5代理服务器
在Centos7下搭建Socks5代理服务器 http://blog.51cto.com/quliren/2052776 采用socks协议的代理服务器就是SOCKS服务器,是一种通用的代理服务器 ...
- python基础之Day20part2
面向过程:核心是过程,解决问题的步骤,先干嘛后干嘛,机械流水线 复杂问题流程化简单化但扩展性差 面向对象:核心是对象,是特征与对象的集合体,基于该思想编写程序,就好比上帝造世界,上帝式的思维方式 扩展 ...
- tomcat设置开机自动启动
windows下: 1 命令cmd 进入 磁盘: 回车 2 tomcat\bin目录 回车 3 service.bat install (注:tomcat一定要有service.bat ...
- delphi 7里怎么隐藏PageControl控件的tabsheet标签
Tabsheet1.tabvisible := False;
- 分享一个mac for redis-desktop-manager破解版安装包
链接: https://pan.baidu.com/s/1BDndGmBlWoSr4hVLpF3FVw 提取码: wwir
- maven的介绍及如何获取jar包
本文转载自 https://www.cnblogs.com/whgk/p/7112560.html 该篇文章篇幅较长,大概的思路如下 maven的介绍,初步认识,获取jar包的三个关键属性 --& ...
- Flink 报错 "Could not find a suitable table factory for 'org.apache.flink.table.factories.StreamTableSourceFactory' in the classpath"
先上代码: table = tablexx.select('*).tablexx.groupBy('x).select('x, xx.count ) tableEnvironment // decla ...
- SEO常用命令大全
SEO常用单个命令如下: link: 指某个特定网站的外部链接,这是一个主要获取排名和权重的主要因素. site: 呵呵,这个是经常用到的了,它是指某个特定网站收录情况. 用法:site: www. ...
- k8s1.13.3安装istio（helm方式）
官方文档:https://istio.io/zh/docs/setup/kubernetes/install/helm/ 一.环境信息 centos7 k8s1.13.3 主机名 ip cpu ram ...
- 使用vmware vconverter从物理机迁移系统到虚拟机P2V（多图）
zhuan:https://segmentfault.com/a/1190000002697929 本文完整记录了如何从物理服务器,保持所有环境配置信息,纹丝不动的迁移到虚拟机上,俗称 P2V .采用 ...