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

写这篇水文呢，也是最近在自己在魔改一个主题用作新做的班级网站。

发现模版的背景图片以及其他地方的图片显示只能在电脑端看到，而在移动端不能够自适应。顺便也整理出来。

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

需要先给CSS background-repeat 属性赋值no-repeat，使图片不重复只显示一张。

然后再定位背景图像位置，给CSS background-position 属性赋值center，设置水平和垂直都居中。

接下来就是图片尺寸了，给background-size属性赋值，并配合background-position-x和background-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！文章结束.......

html css背景图居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法相关推荐

html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...
表格在整个html居中显示,html 表格字符居中显示_如何在HTML中居中显示表格？
html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示 HTML table provides the ab ...
Matlab图窗曲线太多，标签颜色分辨度不高的解决方法
Matlab图窗曲线太多,标签颜色分辨度不高的解决方法例如上图中,曲线多,标签颜色分辨度不高,单纯靠眼里难以分辨对应特征的曲线.这种情况下可以使用legend自带的属性,做交互性处理,点击标签可 ...
计算机上没有足够的可用内存无法完成扫描,windows照片查看器无法显示此图片,因为计算机上的可用内存可能不足解决方法...
win7查看照片显示内存不足怎么办呢?有用户使用win7照片查看器打开图片时提示:windows照片查看器无法显示此图片,因为计算机上的可用内存可能不足.但是电脑硬件配置足够高,内存也不小,那么遇到这 ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
小米助手android6版本暂未支持,小米助手连接不上小米5怎么办小米助手显示不支持安卓6.0连接不上小米5解决方法...
有用户反映小米5连接小米助手没反应,而且还说不支持安卓6.0.但是小米5连接其他管家却能连上,就是一直连不上"小米助手".如果是我也会很郁闷,本来小米助手是针对小米手机连接电脑的配 ...
用电梯服务器怎样解电梯显示E34,菱王n8000电梯显示e41故障代码解决方法
34: 抱闸接触器保护,停止启动 35: 抱闸接触器保护,停止启动 36: 电机电源接触器保护,停止启动 37: 轿门锁继电器保护,停止启动接触器损坏,不能正常吸合 38:抱闸开关故障 39:安全回 ...
Linux | 终端显示为bash-4.1$以及提示bash:command not found的解决方法
本文总结如何解决 Linux 终端显示为 bash-4.1 1 以及提示 bash: command not found 情形 2 ' 3 的解决方法. Updated: 2022 / 7 / 18 ...
测绘——CAD2008+CASS9.1批零插入图块不成功及打开低版本dwg报内部错误的解决方法
CAD2008+CASS9.1批零插入图块不成功及打开低版本dwg报内部错误的解决方法博主最近在做地籍调查项目,很多时候需要对地形图数据进行整合拼接以及投影转换,需要对分幅数据进行整合,此时**&q ...

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

html css背景图居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法相关推荐

最新文章

热门文章