介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,,,& lt; title>背景透明、文字也透明& lt;/title>
,,,& lt; style>
,,,,,,,*,{
,,,,,,,,,,,填充:,0;
,,,,,,,,,,,保证金:,0;
,,,,,,,}
,,,,,,,.container {
,,,,,,,,,,,宽度:,600 px;
,,,,,,,,,,,身高:,400 px;
,,,,,,,,,,,背景:,url (https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg& & # 39; # 39;),不再重演;
,,,,,,,,,,,background-size:,封面;
,,,,,,,,,,,-webkit-background-size:,封面;
,,,,,,,,,,,-o-background-size:,封面;
,,,,,,,,,,,背景位置:,center 0;
,,,,,,,}
,,,,,,,.demo {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,宽度:,260 px;
,,,,,,,,,,,身高:,60 px;
,,,,,,,,,,,:,260 px;
,,,,,,,,,,,行高:,60 px;
,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,,背景颜色:黑色;
,,,,,,,,,,,不透明度:,0.5;
,,,,,,,}
,,,,,,,.demo p {
,,,,,,,,,,,颜色:,# FFF;
,,,,,,,,,,,字体大小:,18 px;
,,,,,,,,,,,粗细:,600;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癱ontainer"比;
,,,,,,,& lt; div 类=癲emo"比;
,,,,,,,,,,,& lt; p> 2018年世界杯已开幕:10天& lt;/p>
,,,,,,,& lt;/div>
,,,& lt;/div>
& lt;/body>
& lt;/html> <李> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,,,& lt; title>背景透明、文字不透明& lt;/title>
,,,& lt; style>
,,,,,,,*,{
,,,,,,,,,,,填充:,0;
,,,,,,,,,,,保证金:,0;
,,,,,,,}
,,,,,,,.container {
,,,,,,,,,,,宽度:,600 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
本篇文章为大家展示了使用CSS3怎么实现背景透明文字不透明,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
效果如下:
背景透明、文字也透明。png
这样貌似也满足了需求,不过并不完美,设置不透明之后,整个元素都半透明了,造成文字显得模糊,这样的解决方式并不可取。
其实实现透明的CSS方法并不只有设置不透明度一种方式。还有另外两种:
css3的rgba(红,绿,蓝,α),α的取值从0到1,如rgba (255255255, 0.8)
<李>即专属滤镜过滤器:α(不透明度=x), x的取值从0到100,如过滤器:α(不透明度=80)
在这里我采用了设置rgba的方式:
