html – CSS背景透明度,文本完全可见

概述我正在尝试实现这样的效果：我有一个div的透明背景颜色(这样我可以在后面看到图像)并保持网站的主要内容居中(即使在调整窗口大小时). 我在JS小提琴中写了一个快速模拟来演示我想要做什么.我遇到的问题是,当我将不透明度设置为根div时,div的每个子节点都会获得不透明度,我无法覆盖它.我知道我在小提琴中做的方式由于没有修复而无法正常工作,但是如何实现这种效果并在调整大小时保持网站居中？ 我可以不使用 我正在尝试实现这样的效果：我有一个div的透明背景颜色(这样我可以在后面看到图像)并保持网站的主要内容居中(即使在调整窗口大小时).

我在Js小提琴中写了一个快速模拟来演示我想要做什么.我遇到的问题是,当我将不透明度设置为根div时,div的每个子节点都会获得不透明度,我无法覆盖它.我知道我在小提琴中做的方式由于没有修复而无法正常工作,但是如何实现这种效果并在调整大小时保持网站居中？

我可以不使用Js吗？

最后注意,在Js fiddle中,文本应该是不透明度1,而黄色应该保持不透明度0.3

这是Js小提琴：http://jsfiddle.net/7d6NY/

HTML：

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing"  /><div >    <div >        THIS IS MY PAGE CONTENT    </div></div>

CSS：

.transparency{    background-color: yellow;    display: block;    opacity: 0.3;    margin: 0 auto;    wIDth: 300px;    height: 500px;}.content{    color: #000;    opacity: 1;    text-align: center;}img{    /* Set rules to fill background */    min-height: 100%;    min-wIDth: 1920px;    /* Set up proportionate scaling */    wIDth: 100%;    height: auto;    /* Set up positioning */    position: fixed;    top: 0;    left: 0;   }

解决方法 您可以将rgba( more info on MDN)值用于透明背景颜色,不要忘记为图像提供负z-index值,以便它叠加在内容后面：

DEMO

CSS：

.transparency{    background-color: rgba(255,255,0.3); /* <-- this line is modifIEd */    display: block;    margin: 0 auto;    wIDth: 300px;    height: 500px;}.content{    color: #000;    text-align: center;}img{    /* Set rules to fill background */    min-height: 100%;    min-wIDth: 1920px;    /* Set up proportionate scaling */    wIDth: 100%;    height: auto;    /* Set up positioning */    position: fixed;    top: 0;    left: 0;      z-index:-1; /* <-- this line is added */}

总结

以上是内存溢出为你收集整理的html – CSS背景透明度,文本完全可见全部内容，希望文章能够帮你解决html – CSS背景透明度,文本完全可见所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。