第
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背景图片铺满内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!