CSS实现背景透明/半透明效果 但内容文字不透明

本文主要是介绍CSS实现背景透明/半透明效果 但内容文字不透明，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

针对透明背景，包括背景图片和背景色

一、背景完全透明

 .bg{background:transparent }

 

二、背景半透明

这里要分两个div，一个单独设置背景透明度，另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。

css:

 .bg{ width: 1000px; height:33px;background-color:#fffff;background-image:url(img.jpg); filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;-khtml-opacity: 0.3;}

 .contnet{margin-top:-33px; width:500px; height:33px; overflow:hidden;}

 

html:

<divclass="bg"></div>
<divclass="contnet">这里是文字部分不透明</div>

这篇关于CSS实现背景透明/半透明效果 但内容文字不透明的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---