前端技巧CSS透明度设置 怎样让背景透明而文字不透明

CSS透明度设置 怎样让背景透明而文字不透明

在网页设计中经常出现将文字显示在图片上的效果,通常为了整体的美观,我们会给图片上的文字设置一个背景,例如下面这个示例:

CSS背景透明文字不透明.png

这里给图片上的文字设置了背景,为了更好的效果,设置了背景的透明度,具体代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div,img,h6 {margin:0;padding:0;font-size:30px;}
div {position:relative;}
h6 {
 position:absolute;bottom:80px;left:0px;
 color:#fff;background:rgba(0,0,0,0.4);
 width:500px;text-align:center;line-height:50px;
}
</style>
</head>
<body>
<div>
<img alt="beautyleg" src="leg.jpg" /><h6>美腿女神Susan</h6>
</div>
</body>
</html>

这里使用background属性的rgba模式(详细了解CSS背景属性知多少),很方便就能设置背景的透明度,关于透明度,在CSS里有一个专门的属性叫opacity(中文翻译为不透明度),opacity属性可以设置为0-1之前的小数,当它取值为0的时候,表示完全透明,取值为1表示完全不透明,例如下面这个图片,将鼠标指向它的时候就会出现半透明的效果:

CSS透明图片

在第一个示例中,如果不使用background属性的rgba模式而采用opacity设置h6标签的透明度,会是怎样呢,经过设置我们发现效果如下图:

CSS透明度.png

与第一种方法的区别就是,opacity不仅让背景透明,连文字也一起透明了,所以当我们需要设置背景透明文字不透明的时候,请使用background:rgba(0,0,0,0.4)这样的方式。此外,同样的方法还可以设置元素边框的透明度,只要使用rgba模式就可以了,而如果使用opacity属性的话,会对元素的整体设置透明度,当然也包括边框。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/62.html