Question

我有一个带有背景图片和一些内容的网页。我的问题是图像在后台全屏显示，但是由于内容不是该页面，因此当我向下滚动时会看到没有图像的内容。

我如何扩展背景图像，以便即使向下滚动也能覆盖整个内容？

.backImage {
			background: url('./images/panoramiki.jpg');
			background-size: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			right: 0;
			z-index: -1;
			filter: blur(5px);
			-webkit-filter: blur(5px);
			background-position: center;
			background-repeat: no-repeat;
			background-repeat: repeat;
			background-size: cover;

	<div class="backImage">	</div>

Answer 1

您是说像下面的代码段一样吗？在这种情况下，您可以使用
background: url("image") no-repeat center center fixed; 或阅读更多here

body {    
    background: url("https://sdtimes.com/wp-content/uploads/2014/10/HTML5_sticker.png") no-repeat center center fixed; 
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p><h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p><h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Answer 2

您正在寻找css属性“ background-attachment”-这将导致图像不会随窗口滚动

https://www.w3schools.com/CSSref/pr_background-attachment.asp

.backImage {
        background-size: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
        background-attachment: fixed;
}

Answer 3

查看是否之前添加了此内容，以便背景不会滚动

background-repeat: no-repeat;


background-repeat: repeat;

**` 你应该把它变成第二个

背景图片

3 个答案: