在您问之前,是的,我确实进行了搜索。据我所知,我正在做我应该做的所有事情。另外,我正在Chrome浏览器中查看此内容。另外,我正在级联多个背景图像,但这不是问题,因为它也不仅仅适用于一个图像。
这是我拥有的CSS代码:
body#homepage {
height:100vh;
width:100%;
background:
url(Sexy%20Women/sexy%20woman%201.jpg) top left no-repeat,
url(Sexy%20Women/sexy%20woman%202.jpg) top left 450px no-repeat,
url(Sexy%20Women/sexy%20woman%203.jpg) top left 900px no-repeat,
url(Sexy%20Women/sexy%20woman%204.jpg) top left 1350px no-repeat,
url(Sexy%20Women/sexy%20woman%205.jpg) top 450px left no-repeat,
url(Sexy%20Women/sexy%20woman%206.jpg) top 450px left 450px no-repeat,
url(Sexy%20Women/sexy%20woman%207.jpg) top 450px left 900px no-repeat,
url(Sexy%20Women/sexy%20woman%208.jpg) top 450px left 1350px no-repeat;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}
HTML:
<body id="homepage"> </body> <!-- yes, no content yet. Just working on background. -->
您可以提供的任何帮助和建议将不胜感激。谢谢。
这是因为您试图在身体上施加模糊效果,如果将其更改为div,则效果很好。只需将所有内容包裹在一个新的div中就可以了
HTML:
<div id="homepage"> </div>
CSS::
div#homepage {
height:100vh;
width:100%;
background:
url(//i.imgur.com/trpMZ1r.jpg) top left no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top left 450px no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top left 900px no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top left 1350px no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top 450px left no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top 450px left 450px no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top 450px left 900px no-repeat,
url(//i.imgur.com/trpMZ1r.jpg) top 450px left 1350px no-repeat;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}