Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/365.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 背景图像_Javascript_Html_Css - Fatal编程技术网

Javascript 背景图像

Javascript 背景图像,javascript,html,css,Javascript,Html,Css,我有一个背景图片和一些内容的网页。我的问题是图像在背景中是全屏的,但由于内容不是一个页面,当我向下滚动时,我看到的内容没有图像 如何扩展背景图像,使其即使在向下滚动后也覆盖整个内容 .backImage{ 背景:url('./images/panoramiki.jpg'); 背景大小:100%; 身高:100%; 位置:绝对位置; 左:0; 右:0; z指数:-1; 过滤器:模糊(5px); -webkit过滤器:模糊(5px); 背景位置:中心; 背景重复:无重复; 背景重复:重复; 背景尺

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

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

.backImage{
背景:url('./images/panoramiki.jpg');
背景大小:100%;
身高:100%;
位置:绝对位置;
左:0;
右:0;
z指数:-1;
过滤器:模糊(5px);
-webkit过滤器:模糊(5px);
背景位置:中心;
背景重复:无重复;
背景重复:重复;
背景尺寸:封面;

您的意思是像下面的代码片段一样吗?在这种情况下,您可以使用
background:url(“图像”)无重复中心固定;
或者读更多

body{
背景:url(“https://sdtimes.com/wp-content/uploads/2014/10/HTML5_sticker.png)没有固定的重复中心;
}

你好,世界!
此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读。

你好,世界! 此文本在背景图像上不容易阅读

你好,世界! 此文本在背景图像上不容易阅读。

你好,世界! 此文本在背景图像上不容易阅读


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


请显示您的代码Hi的可能重复,欢迎使用stackoverflow!如果没有提供某种源代码,我们将只能猜测您的问题是什么。请编辑您的问题,并包括一个可运行的示例。您应该已经解释过,这将设置属性背景附件
.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;
}