如何将背景图片添加到 div 列

Question

我创建了两个不等的并排浮动的列。右侧较小的一列我很满意，但是我想为左侧的一列添加背景图像，但它似乎不起作用。

我曾尝试使用与右侧列相同的代码并执行 style=background-image:... 但这没有用。只有我做了背景色才有效。

    .column left {
background-image: url('i.imgur.com/k5gf0zz.jpg');
background-size: cover;
}

</style>
</head>
<body>



<div class="row">
<div class="column left" >

  </div>
  <div class="column right" style="background-color:#FDE4EC;">

我希望图像填充左侧栏的背景，但现在它显示为空白。

谢谢

Answer 1

您的 url(...) 应该是完整的 URL... 否则您正在尝试加载您所在域的本地文件。

所以更新...

background-image: url('i.imgur.com/k5gf0zz.jpg');

到...

background-image: url('http://i.imgur.com/k5gf0zz.jpg');

（或者 https:// 如果更合适的话）

.column {
  float:left;
  width:50%;
  height:100vh;
}
.left {
  background-image: url('http://i.imgur.com/k5gf0zz.jpg');
  background-size:cover;
  background-position:center;
}
.right {
  background-color:#FDE4EC;
}

<div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>

此外，正如@Paulie_D 在他们对您的原始 post 的评论中所注意到的，您的 CSS 选择器需要是 .column.left 而不是 .column left .

在你的元素中 class="column left" 意味着它同时使用类 column 和 left.

但是在你的 CSS 中，如果你放置 .column left 选择器，这意味着你将只格式化名为 <left> 的元素，这些元素包含在具有 class="column" 的元素中。

通过使用 .column.left，您正在格式化具有两者类

的元素

Answer 2

这对你有用。您的 Url 未正确声明。此外，您使用 bootstrap 并在行 class 中添加一个 class 以将屏幕分为左右两部分。我试图让你的代码结构更好一点。请看一看。

.col-sm-6.column.left {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
  background-size: cover;
  color: white
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<div class="row">
  <div class="col-sm-6 column left">
    left
  </div>
  <div class="col-sm-6 column right" style="background-color:#FDE4EC;">
    right
  </div>
</div>
</div>

Answer 3

试试这个：

HTML

<div class="row">
 <div class="column left">
  </div>
  <div class="column right" style="background-color:#FDE4EC;">
  </div>
</div>

CSS

.column.left {
  background-image: url("https://i.imgur.com/k5gf0zz.jpg");
  background-size: cover;
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}

.column.right {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;

}

您的代码有问题：

不正确URL
不给 div 块

codepen working demo

如何将背景图片添加到 div 列

How to add a background image into a div column

html

css

background-image