代码之家 › 专栏 › 技术社区 › C Wood

如何使用CSS添加延伸网页宽度的背景图像?

codepen image css html

C Wood · 技术社区 · 7 年前

但并不是那么简单。我的意思是,如何将图像拉伸到网页的宽度,但只占页面的33%(看起来不失真)。我想用3个不同的背景图片来填充我的网页。

我的问题是,我是否需要将图像预编辑到一定的长度和宽度,以便它们看起来不失真?还是我错过了什么?

我正在学习freecodecamp,并试图创建一个包含三个部分的公文包,每个图像都用作该特定部分的背景。

我一直在研究堆栈溢出、W3学派,并在codepen中修补不同的代码片段。io。我确实尝试过用照片编辑器调整图像的大小,然后尝试将它们添加到我的页面。它们看起来仍然扭曲和怪异。

恐怕我卡住了。有人会给我指出一个好的资源或提供一些见解吗?

1 回复 | 直到 7 年前

williamsi 7 年前

窗户高度的33%?

// HTML
<div class="container">
    <div class="img first-background"></div>
    <div class="img second-background"></div>
    <div class="img third-background"></div>
</div>

// CSS
.img{
    width: 100%;
    height: 33vh; // vh means ViewHeight, 33% of your window height
    background-size: cover;
    background-position: center;
}

.first-background{ background-image: url('/a-link-to-your-image.jpg') }
.second-background{ background-image: url('/a-second-link-to-your-image.jpg') }
.third-background{ background-image: url('/a-third-link-to-your-image.jpg') }

推荐文章

mhuber · Javascript:多次使用countup函数

7 年前