Question

图片为328x328像素https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1

我的div的宽度是984px（328x3）。

出于某种原因，当我使用fixed作为背景附件时，它会剪切图像，但是当使用默认值scroll时，图像就是完美的。这是为什么？

它不仅被裁剪，而且当我调整窗口以完全显示时，图像消失了！

＆＃13;

.test {
	background-color: cyan;
	height: 1720px;
	width: 984px;
	background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1);
	background-repeat: no-repeat;
    background-position:  right top;
    background-attachment: fixed;
}

＆＃13;

<div class='test'></div>

＆＃13;

Answer 1

因为fixed针对视口而得到修复。当元素在视图中时，background-position: right top; background-attachment: fixed;会将图像放在视口的顶部/右侧。并且由于应用背景的元素与视口一样宽（取决于您的屏幕大小），因此会剪切背景图像。从元素中移除width，使其可以位于视口的顶部/右角，并且只要元素位于顶部/右角，背景也会固定在顶部/右侧角落。

＆＃13;

.test {
    background-color: cyan;
    height: 1720px;
    /*width: 984px;*/
    background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1);
    background-repeat: no-repeat;
    background-position:  right top;
    background-attachment: fixed;
}

＆＃13;

<div class='test'></div>

＆＃13;

CSS背景附件固定剪裁图像

1 个答案: