css怎么把背景图片拉伸至100%

作者:落知秋 | 创建时间: 2023-03-29
在网页制作的工作中,我们经常需要将背景图片铺满容器的100%,但是又不是平铺,那么需要怎么做呢?今天我就教大家 css怎么把背景图片拉伸至100%...
css怎么把背景图片拉伸至100%

操作方法

首先准备一张设置为背景的图片,我这边准备的是一张650px*347px的图片

然后建立一个html文档,将它和背景图片放到一个文件夹中(这边只做测试),所以我没有建立images文件夹放置图片

编辑html文档,我这边建立一个div,设置宽度为700px(要比我们的背景图宽,不然看不到我的方法有没有用),高度跟背景图一样,为347px,

然后我们就给div设置背景图片

在浏览器中预览会发现图片平铺了,这不是我们想要的效果

然后我们可以给div再加上属性,-moz-background-size:100% 100%; background-size:100% 100%; 这样设置后再看网页就会发现背景图片拉伸至100%了。

温馨提示

我这只是教大家设置用css将背景图片拉伸至100%,所以没有规范做,正常图片应该新建一个images文件夹放置
图片的宽度跟容器的宽度不要相差太大,不然容易导致图片变形
点击展开全文

更多推荐