清酒踏月—清酒博客 清酒踏月—清酒博客

网站背景图居中自适应以及拉伸填充CSS代码解决方法

in 前端技术 文章转载请注明来源!

写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站。
发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应。顺便也整理出来。

首先是图片的居中自适应:

需要先给CSS background-repeat 属性赋值no-repeat,使图片不重复只显示一张。
然后再定位背景图像位置,给CSS background-position 属性赋值center,设置水平和垂直都居中。
接下来就是图片尺寸了,给background-size属性赋值,并配合background-position-xbackground-position-y赋值center来实现CSS背景图片background-image缩放后居中显示。
background-size的赋值方法有多种:
1.给background-size属性赋值容器宽度和高度中的最小值,实现CSS背景图片缩放后居中显示。

background-size:400px 200px;

2.给background-size属性赋值100%实现CSS背景图片缩放后居中显示。(这种赋值方法会导致图片非等比例缩放,也就是导致图片会适应容器的高宽比。)

background-size:100% 100%;

3.通过background-size:contain实现CSS背景图片缩放后居中显示。(contain的优点是会保留背景图片的宽高比,不会被拉伸变形,所以适用于保留背景图片宽高比的需求中。)

background-size:contain;

因为图片尺寸与容器大小不一样,所以我们采用第二个百分比适应的方法。
所以最终代码如下:

body {
background-image: url(https://img.lkxin.cn/*****);
width:***px;
margin:**px auto -**px auto;
text-align: center;
padding:**px;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 100% 100%;
color:#FFFFFF;
}

接下来是背景图以拉伸方式(不重复)填充背景

方法同上,同样利用background-repeat: no-repeat;background-size: 100% 100%
而不同的地方是上面使用的background-position属性的作用是定位,而接下来要用到background-attachment属性的作用是将其固定住,使其不滚动,不移位置。
那么就需要给background-attachment赋值fixed

background-attachment: fixed;

最终代码为:

background-image: url(https://img.lkxin.cn/*****);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;

OK!文章结束.......

jrotty WeChat Pay

打赏一下喽

jrotty Alipay

顺便关注一下,谢谢

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://blog.lkxin.cn/archives/344.html (转载时请注明本文出处及文章链接)

前端技术
发表新评论
PREVIOUS NEXT
雷姆
拉姆
0:00