CSS:半透明背景和图像 [英] CSS: Semi-transparent background and an image

问题描述

body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

我尝试使用上述方法在背景图像上方生成半透明的白色背景.它不起作用，只显示背景图像并且背景颜色似乎被忽略了.如何调整身体背景图像的不透明度?

I tried using the above to produce a semi-transparent white background above a background-image. It doesn't work, only the background image is shown and the background-color appears to be ignored. How can I adjust the opacity of a body background image?

推荐答案

background-color 放置在 background-image 下方，而不是上方(在 web 中渲染时)-浏览器).要在图像上放置一个半透明的白色块，您需要使用 background-color 在其上放置另一个不同的 HTML 元素.

background-color is placed underneath background-image, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with background-color.

这篇关于CSS:半透明背景和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！