Rumah > hujung hadapan web > tutorial css > 利用css实现背景透明和文字不透明效果汇总

利用css实现背景透明和文字不透明效果汇总

伊谢尔伦
Lepaskan: 2017-06-07 13:48:15
asal
2315 orang telah melayarinya

在项目开发过程中,透明和不透明样式的使用很早就开始流行了。到现在已经是大家非常熟悉的效果了,透明效果不仅仅是对图片,还有各种地方都有使用到,用CSS也可以非常简单的实现各种浏览器的兼容设置。有时候经常会用到背景图上放一些文字介绍,需要有背景图片透明而文字不透明的效果。下面章节的内容我们就来说一说利用css来实现背景图片透明而文字不透明效果。

背景图片透明而文字不透明

背景透明和文字不透明效果

1. 用CSS实现背景图片透明而文字不透明的两种方法

方法一(毛玻璃效果):背景图 + 伪类 + flite:blur(3px)

方法二(半透明效果):背景图 + 定位 + background:rgba(255,255,255,0.3)

CSS实现背景图片透明,文字不透明效果的两种方法

2. CSS实现背景透明,文字不透明(兼容各浏览器)

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜。

3. css实现背景透明和文字不透明方法

实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法

css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8

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)

4. 解决css设置背景透明,文字不透明

设置元素的透明度:

-moz-opacity:0.8; /*在Firefox中设置元素透明度

filter: alpha(opacity=80); /*ie使用滤镜设置透明

但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。

5. 实现CSS3不透明度完整代码

取值说明:

1、|是由浮点数和单位标识符组成的长度值。不可为负值,默认值为1.opacity取值为1时,则元素为完全不透明的;反之,取值为0时,元素是完全透明的,不可见。

2、inherit表示继承,即继承父元素的不透明性。

3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。

相关问答

1. css实现背景透明内容不透明

2. canvas背景不透明,但内部某元素透明(类似镂空效果)

3. 求css背景透明与文字不透明的方法

【相关推荐】

1. php中文网免费视频教程:《php.cn独孤九贱(2)-css视频教程》

2. php中文网相关文章:CSS中关于半透明设置的总结

Atas ialah kandungan terperinci 利用css实现背景透明和文字不透明效果汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan