css样式之background-position:center center；图片只显示一半的原因

css样式之设置background-position:center center; 导致背景图片只显示一半的原因

qq_41877322

1551人浏览 · 2023-12-18 19:34:40

qq_41877322 · 2023-12-18 19:34:40 发布

css样式之background-position:center center; 导致背景图片只显示一半的原因

这是原图,宽高为1500x900。
在这里插入图片描述

这是代码

body {
        background-image: url(images/text.jpg);
        background-position: center center;
        background-repeat: no-repeat;
    }

这是显示效果。
在这里插入图片描述
而我想要的效果是

这是我要插入的背景图片，是让它在居中位置摆放。

然而在background-position的设置过程中，有的人说输入center top（水平居中位置从y轴的顶部开始摆放）也可以达到这样的目的？
这种方式，图片小于浏览器的宽高的时候就用不了了，否则会出现如下图（图四）所示。
可以看到图四的头部紧紧地顶着导航栏，没有实现垂直居中。而图三的图片上方和导航栏之间出现空隙，下方和浏览器底部也有空隙，实现了垂直居中。

解决办法: 只需要在css代码里插入一行

html {
        height: 100%;
    }

原因：

1.首先说下html页面的宽度和高度问题。

在html页面里，父元素与子元素可以这么看待，html （父元素）body（子元素）div（孙子元素），这三个块级元素。

如果没有主动设置其宽高，浏览器会为其依次分配可使用的最大宽度（最大可到全屏宽度），而高度是不分配的，html、body、div这三者的块元素的高度是0。

而这个时候，你的空div块元素在css样式里又设置了height:80%，这个高度百分比不是定值，它是需要依次遍历父元素来找到一个确切的高度数值。但是刚才没有给html、body、这两者的块元素定义高度，它找不到确切数值的。所以在最终的页面呈现上，你不会看到有空div的颜色出现。

代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        background: red; /*设置了空div的背景颜色是红色*/
        height: 80%;
    }
</style>

</style>

<body>
    <div> </div>
</body>

</html>

而且html页面里父元素（html、body）依赖子元素堆砌撑高，如果给div设置高度了（而没有给它的父元素设置高度），比如weight:500px;那么它的父元素会被子元素依次撑起来。父元素的宽度也会达到500多px。
所以，结论是

父元素依赖子元素堆砌撑高，子元素依赖父元素的定高起作用。

要想解决这样的死循环，就两个方向：①是给子元素设置具体高度。②给父元素设置具体高度。而最大高度就是浏览器的高度，只需要给html设置height:100%，这样浏览器就会把本身的定高赋值给html。

这样就解释了开头我加这一句代码的意义，是为了给html赋高。
但是为什么赋高就使得只显示一半的图片都显示了呢？

2.这就要用到backgroud-position的知识了。

伙伴们，打起精神，精彩的来了~~~
在这里插入图片描述
这是一个div盒子，上图所写的是xy坐标轴，以左上角为起点，分别以向右和向下为正方向。
而center相当于距离任意它被应用的方向偏移50%(水平或竖直)。
当我们在对div设置css样式里的 background-position: center center; 的时候，相当于 background-position: 50% 50%。
这个50%不是定值，div需要向上遍历父元素，来找到具体数值来决定它偏移多少。

当背景图片尺寸（background-size）不做任何的重置（也就是100% 100%）时，水平百分比的值等于浏览器容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于浏览器容器高度百分比值减去背景图片高度百分比值

用上面这个知识点，我们来算一下。
假设我们还没有给html块元素赋高，是不是我现在的html块元素高度是0，对吧。
水平的百分比的值就是：【1920（我的浏览器宽度）-1500（我的图片宽度）】x50%=210。
垂直的百分比的值就是：【0（我的浏览器高度）-900（我的图片高度）】*50%=-450.
我们得出来的坐标是（210px,-450px）。
令人关注的是y轴的坐标是负的，按照刚才画的正坐标轴的方向，我们知道，负坐标就是y轴的反方向，也就是图片需要向上移动450px。也就有了开头我们看到的图片只出现一半。

那现在我已经通过代码

html {
        height: 100%;
    }

给html的宽度赋值了，现在我的

垂直的百分比的值就是：【953（我的浏览器高度）-900（我的图片高度）】*50%=26.5.
我们得出来的坐标是（210px,26.5px）。
也就是图片顺着y轴正方向移动26.5px即可得到图三，实现了垂直居中。

所以，因为给html赋高，使得垂直百分比的纵坐标有正数的值，图片向下移动后成为人眼中垂直居中效果。如果不赋高，纵坐标就是负的，要向上移动。

不明白的可以再看下参考链接，讲的细节知识点。
参考: https://blog.csdn.net/javaloveiphone/article/details/51098972
http://www.zhangxinxu.com/wordpress/?p=259
https://blog.csdn.net/tian361zyc/article/details/73557336