Question

我想在我的HTML页面中设置background-image 50% opacity。以下是代码我写的：

CSS：

body{background-image:"E:\\Work\HTML5\IMG_18072014_115640.png"}

HTML：

<h1>Hello world!</h1>
<body>
   The background image is known shown.
</body>

但我看不到任何背景图片。但是图像显示我是否使用它：

HTML：

<body background="IMG_18072014_115640.png">The background is shown.</body>

为什么第一个代码不显示任何背景图像，但第二个代码不显示。我希望我的背景图像以第一个代码中的方式显示。

Answer 1

您缺少url部分，这是语法

 background-image: url('img/whatever.png');

Answer 2

您缺少网址部分：

background-image: url('img/name-of-image.png');

此代码来自CSSTricks。你可以尝试一下！

body {
  display: block;
  position: relative;
}

body::after {
  content: "";
  background-image: url('./img/name-of-image.jpg');
  opacity: 0.5; /* 0.5 = 50% */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

如何将不透明度设置为背景图像

2 个答案: