我如何使我的CSS模糊效果起作用?

问题描述 投票:0回答:1

在您问之前,是的,我确实进行了搜索。据我所知,我正在做我应该做的所有事情。另外,我正在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. -->

您可以提供的任何帮助和建议将不胜感激。谢谢。

css filter webkit blur
1个回答
0
投票

这是因为您试图在身体上施加模糊效果,如果将其更改为div,则效果很好。只需将所有内容包裹在一个新的div中就可以了

JSFiddle

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);
}
© www.soinside.com 2019 - 2024. All rights reserved.