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(...)应该是完整的网址...否则，您将尝试加载域中本地文件。

所以更新...

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在对原始帖子的评论中所注意到的那样，您的CSS选择器需要为.column.left而不是.column left。

在元素class="column left"中表示它同时使用类column和left。

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

通过使用.column.left来格式化具有两者类

的元素

Answer 2

这将为您工作。您的网址未正确声明。此外，您已经使用了引导程序，并且需要在row类中添加一个类来将屏幕分为左右两部分。我试图使您的代码结构更好一些。请看一看。

.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列中

3 个答案: