弹性容器的背景图像

Question

我正在尝试为弹性容器设置背景图片。然而，它似乎并没有出现。有谁知道为什么？谢谢

css:

.sidebar { 
            display: flex;
            height: 710px;
            width: 30%;
            flex-flow: column wrap;
            align-content: center; 
            font-family: 'OpenSans, OpenSans-Regular';
            background-image: url("/images/IMAGE2.png");
            background-position: center; 
            background-repeat: no-repeat;
            background-size: cover; 
}

我没有看到任何错误，因为我已经将它与在线示例进行了比较。正文有底色，但好像不影响其他图片。

Answer 1

我猜你有一个文件夹用来存储你的 CSS 文件，另一个文件夹用来存储图像。如果是这种情况，您将必须转到父目录并在正斜杠 /.

之前使用 .. 打开图像文件夹

background-image: url("../images/IMAGE2.png");

Answer 2

可能您没有正确提及图片地址。我只是用一个例子来尝试一下，以确保它工作正常。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: green;
  background-image: url("https://i.pinimg.com/736x/3b/af/e6/3bafe638ffbd522cb450f81235d87426.jpg");
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 100px 100px; 
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

弹性容器的背景图像

Background-image for a flex-container

html

css

background-image