怎么用css把背景图片拉伸 不是平铺

发布网友 发布时间：2022-04-20 10:21

我来回答

共6个回答

热心网友 时间：2022-04-06 14:56

1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。

2、然后建立一个html文档，将它和背景图片放到一个文件夹中。

3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。

4、就给div设置背景图片。

5、在浏览器中预览会发现图片平铺了，这不是想要的效果。

6、然后可以给div再加上属性，-moz-background-size:100% 100%; background-size:100% 100%。

7、这样设置后就会发现背景图片拉伸至100%了。

热心网友 时间：2022-04-06 16:14

纯css实现的话可以使用css的background-size属性。语法如下示例：

p{background-size:100% 100%}

共有两个值，第一个值是宽度，第二个值是高度。如果只设置第一个值，则第二个值默认为"auto"。

热心网友 时间：2022-04-06 17:49

据我所知，CSS目前没有拉伸背景图片的功能。只能用脚本控制，但是为了效果比较好，拉伸并不是一个好的选择，你可以针对不同分辨率准备背景，用脚本判断分辨率（参见 http://zhidao.baidu.com/question/271401226.html）以使用不同的图片背景。如果真要拉伸，那依然是判断完分辨率，用脚本修改图片宽度、高度属性。

热心网友 时间：2022-04-06 19:40

用img元素做背景，设置width="100%" height="100%"，将表单元素定位到它里面就行。

热心网友 时间：2022-04-06 21:48

可以使用css3新属性 Background-size
不过要取决于浏览器的支持

在或者js可能也是可以控制

热心网友 时间：2022-04-07 00:13

css有拉伸图片的功能么？这个问题，你用ps把图片变大就好啦