我设置的图片为什么只有一半？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(https://img1.sycdn.imooc.com/climg//60ceb4230943d2bb04010403.png) no-repeat center center cyan;
        }
    </style>
</head>
<body>
</body>
</html>

慕粉1555086949 2022-06-30

源自：CSS入门 8-5 背景样式连写

收起

1回答

好帮手慕小尤回答被采纳获得+3积分 2022-06-30 13:30:27

同学你好，center表示居中，从而导致图片只展示了一半。建议将第二个center修改为top，表示背景图片靠对象紧贴顶部开始显示。

祝学习愉快！

收起回答

慕粉1555086949 提问者 #1

为什么这里设置y轴为center，图片不会在正中心显示？body不应该是整个页面吗

2022-06-30 13:59:17

														好帮手慕小尤
																																																								
																																																								回复
																												提问者
																																										慕粉1555086949
																																																								#2
													

同学你好，是的，boby是整个页面，如果同学想要在正中心进行展示，可以添加fixed，表示当页面的其余部分滚动时，背景图像不会移动。如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(https://img1.sycdn.imooc.com/climg//60ceb4230943d2bb04010403.png) no-repeat fixed center cyan;
        }
    </style>
</head>
<body>
</body>
</html>

祝学习愉快！

2022-06-30 15:05:22