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

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

伊谢尔伦
Lepaskan: 2017-06-07 13:48:15
asal
2240 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!

sumber:php.cn
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