时间戳

首页 > 解决方案 > 背景图片

javascript - 背景图片

问题描述

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

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

.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>

标签： javascripthtmlcss

解决方案

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

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;
}

推荐阅读