最近遇到一个需求,如下图,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

  

  

  

最新文章

  1. CentOS中的环境变量配置文件
  2. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎
  3. C#对DBF文件的操作
  4. 【BZOJ】1119: [POI2009]SLO
  5. web项目引用Java项目,连接报错error HTTP Status 500 - Servlet execution threw an exception
  6. lintcode:Wiggle Sort II
  7. jcscriput
  8. Linux使用者管理(2)---账号管理
  9. Mybatis拦截器介绍
  10. gulp 前端自动化工具
  11. Android学习笔记:多个AsyncTask实例的并发问题
  12. Linux命令 比较文件
  13. 关于用户与服务端密码的校验问题 !mysql php
  14. JSPatch 热更新
  15. http无状态
  16. loadrunner常用函数集锦
  17. There are multiple modules with names that only differ in casing. 黄色warning
  18. day6 三级菜单
  19. CISCO知识扫盲
  20. Ubuntu14.04下安装redis-3.2.0以及开机自启动

热门文章

  1. hibernate入门一
  2. Requset模块
  3. 树莓派3 开机自启动(SPI)
  4. SQL Injection-Http请求的参数中对特殊字符的处理
  5. JAVA实训第四次作业
  6. Clinet/Server在工作线程中刷新页面数据的方法
  7. 面向对象(特殊成员 组合 self)
  8. 【微信小程序】模仿58同城页面制作以及动态数据加载
  9. 20155312 张竞予 Exp7 网络欺诈防范
  10. #2019-2020-4 实验二面向对象程序设计《Java开发环境的熟悉》实验报告