Question

我是HTML和CSS的新手。如何使背景图像一直向上并占据顶部和侧面的空白区域？但是，我不打算将此图像作为整个页面的背景，因为我想要有多个背景图像。

这是我的代码 - CSS：

header
{
    background-image:linear gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("background3.jpg");
    height:100vh;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

enter image description here

Answer 1

请看一下：https://css-tricks.com/almanac/properties/o/object-fit/。

希望这有帮助。

更新

<强> HTML

<div class="image">
     <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
</div>

<强> CSS

图像是绝对定位的，因此对象适合属性可以根据容器的宽度和高度修改图像的宽度/高度：

.image {
  width:100%;
    height:100px;
    position:relative;
}

img {
    -o-object-fit:cover;
    object-fit:cover;
    position:absolute;
    width:100%;
}

我创建了一个小提琴，以此为例：https://jsfiddle.net/cr7h76eh/1/。

如何使用css / html使背景图像完美契合？

1 个答案:

更新