CSS3实现背景透明,文字不透明
最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示:
看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景透明,文字也透明</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 400px;
background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.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: black;
opacity: 0.5;
}
.demo p {
color: #FFF;
font-size: 18px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<p>2018世界杯已开幕:10天</p>
</div>
</div>
</body>
</html>
效果如下:
这样貌似也满足了需求,不过并不完美,设置opacity之后,整个元素都半透明了,造成文字显得模糊,这样的解决方式并不可取。
其实实现透明的CSS方法并不只有设置opacity一种方式。还有另外两种:
- css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
- IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)
在这里我采用了设置rgba的方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景透明,文字不透明</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 400px;
background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.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(0,0,0,0.5);
}
.demo p {
color: #FFF;
font-size: 18px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<p>2018世界杯已开幕:10天</p>
</div>
</div>
</body>
</html>
效果如下:
这样设置之后,文字显得清晰了许多。
小结
其实要实现这个需求,并不只有这一种思路,还可以用两个DIV放在同一个位置,一个是半透明的背景DIV,一个是文字DIV,一样可以解决问题,但是需要写绝对定位或负margin,并出现空内容的DIV,这种方法在有些场景下会显得略微复杂,如下示例所示,所以在实际需求场景中还是要具体问题具体分析。
CSS3实现背景透明,文字不透明的更多相关文章
- css背景透明文字不透明
测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...
- CSS3实现背景透明文字不透明
最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...
- 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,则越不透明 ...
随机推荐
- 导入贴图操作:处理贴图MaxSize和Format
using UnityEngine; using System.Collections; using UnityEditor; public class ImportModflyTextures : ...
- Pycharm按装
1.python 官方 2.下载完成后点击exe 安装 3.按装完成后在cmd中输入 python 1.如果显示python版本 那么就安装成功 2.如果出现"python"不是外 ...
- codeforces水题100道 第二十题 Codeforces Round #191 (Div. 2) A. Flipping Game (brute force)
题目链接:http://www.codeforces.com/problemset/problem/327/A题意:你现在有n张牌,这些派一面是0,另一面是1.编号从1到n,你需要翻转[i,j]区间的 ...
- JavaScript的数据类型---最全,最详细的数据类型,高级的工程师从数据类型开始
一.基本数据类型 1.字符串数据类型 var hello="你好啊"; var hello='你好啊';示例:<script language="j ...
- php文件的处理和操作
好长时间没有看php手册了,有些关于文件操作方面的知识点发现从没有学过,现补习一下,顺便整理一下: 1.文件的打开:fopen() 此函数的第一个参数含有要打开的文件的名称,第二个参数规定了使用哪 ...
- 安卓下junit测试
安卓下junit测试 第一种方法: 1,在AndroidManifest.xml下,加入如下红色代码 <manifest xmlns:android="http://schemas.a ...
- 四、K3 WISE 开发插件《工业单据老单插件开发新手指导》
开发环境:K/3 Wise 13.0.K/3 Bos开发平台.Visual Basic 6.0 =============================================== 目录 一 ...
- Web服务器配置Gzip压缩提升网站性能
前言: HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服 ...
- PCL—低层次视觉—关键点检测(iss&Trajkovic)
关键点检测往往需要和特征提取联合在一起,关键点检测的一个重要性质就是旋转不变性,也就是说,物体旋转后还能够检测出对应的关键点.不过说实话我觉的这个要求对机器人视觉来说是比较鸡肋的.因为机器人采集到的三 ...
- 线程同步之ManualResetEvent类的用法
笔者的一台激光测厚设备的软件, 它有一个运动线程, 一个激光数据处理线程. 运动线程做的事就是由A点移动到B点, 然后再由B点移动回A点. 激光处理线程要做的事就是采集指定数量点的激光数据, 随着采集 ...