html - 如何在 body 风格的一行中正确设置背景不透明度?

标签 html css

下一步如何正确设置背景不透明度:

<body style="background-image: url(images/background.jpg); background-color: white;
 background-position: center center; background-size: 100%; 
 background-repeat: no-repeat">

我尝试:

background-opacity: 0.5;

但是失败了。

应该是这样的:

background-image: url(images/background.jpg) opacity: 0.5;

甚至,

opacity: .4;

不影响图像,但影响文本和整个正文。

不接受带有 div 的解决方案。

我的网页:http://shell.bshellz.net/~panzerdivision/

浏览器:firefox & chrome

最佳答案

使用 opacity 属性,改变元素本身的不透明度。

要获得透明的background-color,您可以使用rgba() 作为背景色:

background-color: rgba(255, 255, 255, .5);

或者简写:

background: rgba(255, 255, 255, .5) url(path/to/transparent/background.png) center center no-repeat;

但是如果您需要一个透明的背景图像,图像应该本身是透明的。

顺便说一下,here is a solutionbackground-image 赋予不透明度,但我不确定在这种情况下是否有用。

关于html - 如何在 body 风格的一行中正确设置背景不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18488412/

相关文章:

javascript - Canvas - 当我将 <canvas> 放入 div 时不起作用

css - Bootstrap Navbar 定位项

html - 如何更正浏览器之间的不同字体大小

javascript - 在 KineticJS 中按类名从阶段获取多个对象

css - 如何水平居中非固定宽度的div?

css - 悬停和 CSS3 之前的问题

html - 浏览器的 1px 计算问题(亚像素问题)

html - 在 HTML 中,如何在将鼠标悬停在文本上时显示图像?

css - 不同浏览器和设备上的不同 css,响应能力

html - CSS 下拉菜单元素向左移动?