基本信息
文件名称:HTML+CSS实现背景图片铺满页面的三种方法.docx
文件大小:15.83 KB
总页数:3 页
更新时间:2025-05-21
总字数:约1.2千字
文档摘要

HTML+CSS实现背景图片铺满页面的三种方法

针对页面背景图片我整理了几种方法仅供参考

在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面,我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式,在下面我为大家的整理好了,仅供参考学习。

一、DIV中添加背景图片

代码如下(示例):

head

metacharset=UTF-8

title图片背景铺满/title

style

div{

/*图片地址不重复水平位置居中垂直位置居中*/

background:url(1.png)no-repeatcentercenter;

height:100%;

width:100%;

/*把背景图片放大到适合元素容器的尺寸,图片比例不变*/

background-size:cover;

position:absolute;

left:0;

top:0;

/style

/head

body

div/div

/body

二、img中设置背景图片

代码如下(示例):

head

metacharset=UTF-8

title图片背景铺满/title

style

img{

width:100%;

height:100%;

/*元素的位置相对于浏览器窗口是固定位置*/

position:fixed;

left:0;

top:0;

/style

/head

body

imgsrc=1.pngalt=

/body

三、Body中设置背景图片

代码如下(示例):

head

?metacharset=UTF-8

?title图片背景铺满/title

??style

????body{

??????background:url(1.png)no-repeat;

??????/*把背景图片放大到适合元素容器的尺寸,图片比例不变*/

??????background-size:cover;

????}

??/style

/head

body

/body

以上就是html+css将背景图片铺满的几种常用方法,这些方法可以满足大多数前端学习的日常使用需求,效果图我就不放出来了,大家把图片的路径改成自己的就可以使用。更多相关HTMLCSS背景图片铺满内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!