0

我想要实现的是用宽度和高度的图像填充 div。我得到的是对宽度的控制，但高度将尊重纵横比而不用高度填充 div。尝试过背景尺寸：覆盖并包含在所有可能的组合中，但我真正能在不裁剪的情况下覆盖的只是宽度。我不能以像素为单位给出绝对大小，因为我的页面是响应式的。

.slick-list {
   background-image: url(http://lace.x10host.com/wp-content/uploads/2015/11/slicklist.png);
   background-size: 100%, cover;
   background-repeat: no-repeat;
}

我真正需要的是使图像1中的白色条纹（1440 x 76 px）覆盖图像2中的整个slicklist。css可以吗？我要生气了，请帮帮我！ 在此处输入图像描述

4

2 回答 2

2

您是否尝试background-size: 100% 100%;过在 div 中水平和垂直拉伸图像？

注意：使用此方法会扭曲图像，这可能是您不想要的，但如果您想要一个带有模糊边框的白框，您可以仅使用 CSS 来实现，即使您调整大小也能保持角落美观。

更新：为下面接受的解决方案添加了代码段：

div#x {
  background: #000;
  padding: 10px;
}
div#shadow {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #fff;
}
<div id="x">
  <div id="shadow"></div>
</div>

于 2015-12-10T13:00:24.163 回答
1

如果背景大小：100% 100%；不起作用，那么您的 div 或容器元素可能没有您想象的那么大。也许您看到它是全尺寸的，因为您看到溢出超出了元素的范围。

请参阅此页面...背景大小：100% 100%；应该做你想做的事。

于 2015-12-10T16:13:35.660 回答