如何在CSS中定义背景色透明而文字不透明

学习Dreamweaver网页设计的同学，有时候想让一个DIV实现背景半透明效果，是怎么做到的呢？

首先我们新建一个html文件，添加一个DIV，设置宽度和高度，以及背景色填充为红色。

然后在父级DIV中插入一个子DIV，定义它的宽高，以及背景色（background：#fff;）。

然后我们添加一个透明度的代码（opacity:0.6），保存后我们预览下效果，背景已经实现透明了，但是文字也透明了。那这个0.6是什么意思呢？

熟悉PS的同学应该都知道，在图层的上方，有个不透明度，我们把PS中图层不透明度设置为60%，就和网页中的效果一样了。对咯，他们就是一个数值。

但有的朋友不希望都透明。那我们怎么能让背景透明，文字不透明呢？我们可以把刚才的背景色和不透明度代码删除，换个代码【background-color:rgba(255,255,255,0.6);】，保存后我们看下效果，已经变成了背景透明，文字不透明啦。

其中255,255,255就是PS中的拾色器里的数值啦，我想很多朋友应该就知道了。0.6同第一种方式是一个含义哦，现在朋友都会了吧？其实很简单的呢。

如何在CSS中定义背景色透明而文字不透明

学习Dreamweaver网页设计的同学，有时候想让一个DIV实现背景半透明效果，是怎么做到的呢？

首先我们需要新建一个HTML文件，并在其中添加一个DIV元素。设置该DIV的宽度、高度以及背景色填充为红色。

接下来，在父级DIV中插入一个子DIV，并定义它的宽度、高度以及背景色（background：#fff;）。

然后，我们为子DIV添加一个透明度的代码（opacity:0.6）。保存后，我们可以预览效果。背景已经实现了透明效果，但是文字也变得透明了。那这个0.6是什么意思呢？

熟悉Photoshop的同学应该都知道，在图层面板的上方，有一个不透明度选项。如果我们将PS中图层的不透明度设置为60%，就可以达到与网页中效果相同的效果。对了，它们其实是一个数值。

但是有些朋友可能并不希望同时让背景和文字都变得透明。那么我们该如何才能让背景透明而文字保持不透明呢？我们可以将之前的背景色和透明度的代码删除，并替换成另一行代码【background-color:rgba(255,255,255,0.6);】。保存后，我们再次查看效果，背景已经变得透明，而文字则保持不透明。

其中的255,255,255代表了PS中的拾色器中的数值，这应该是很多朋友都知道的。0.6和第一种方式具有相同的含义哦！现在大家应该都明白了吧？其实它非常简单。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。