css设置背景图拉伸铺满！

2024-06-26 20:33| 来源: 网络整理| 查看: 265

在css样式里设置背景图片拉伸充满有几种方法： 1、用body里设置（但是这样的缺点是只能横向充满，高度是按比例拉伸的）:

background-size:100%;

或者：background-size:cover;

示例代码：

body{ background-image:url(test.jpg); background-repeat:no-repeat; background-size:100%; } 2、用一个div充满整个body（这样的缺点可想而知，网页的代码只能放在这个div里）：

示例代码：

html部分代码：

测试测试

css样式部分代码:

body{ overflow:hidden; } div.background{ position:absolute; width:100%; height:100%; background-image:url(timg.jpg); background-repeat:no-repeat; background-size:100% 100%; } 3、用一个img充满整个body（但是这样子后面的元素都要设置定位了，但自我感觉并不碍事哈~~~）：

html部分代码：

测试测试

css样式部分代码：

body{ overflow:hidden; } img.background{ position:absolute; width:100%; height:100%; } h1{ position:absolute; top:0px; }

上面都是我的一些总结，不足之处欢迎补充！

【本文地址】

公司简介

联系我们