Css 仅模糊背景图像
正如你所看到的,在链接中给出的页面顶部有两幅图像,一幅是背景图像,另一幅是上面的图像,两者都是模糊的。我想要的是模糊背景图像,而不是顶部的图像。我不知道怎么做。请帮帮忙,这是链接 这是我的cssCss 仅模糊背景图像,css,Css,正如你所看到的,在链接中给出的页面顶部有两幅图像,一幅是背景图像,另一幅是上面的图像,两者都是模糊的。我想要的是模糊背景图像,而不是顶部的图像。我不知道怎么做。请帮帮忙,这是链接 这是我的css #work-gallery { background-repeat:no-repeat; background-size:cover; -webkit-filter: blur(5px); } 这是我不想模糊的顶部图像的html <div id="slidesho
#work-gallery
{
background-repeat:no-repeat;
background-size:cover;
-webkit-filter: blur(5px);
}
这是我不想模糊的顶部图像的html
<div id="slideshow" style="margin-top: 17.5px;">
<ul id="fdgSlides" style="width: 1275px; height: 425px; left: 0px;">
<li class="fdgSlide" style="width: 1275px;">
<img src="node.au.com/wp-content/uploads/thumb_at38_01.jpg"; alt="" style="width: auto; height: 100%; margin-top: -212.5px;">
</li>
</ul>
</div>
制作一个单独的背景元素:
HTML:
<div id="gallery-background"></div>
#gallery-background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(http://www.node.au.com/wp-content/uploads/thumb_at38_01-450x300.jpg);
background-repeat:no-repeat;
background-size:cover;
-webkit-filter: blur(5px);
}
-webkit过滤器将影响要应用它的元素的子元素,因此必须将背景移出。我在中找到了一个解决方案
哇
div{
高度:500px;
宽度:100%;
文本对齐:居中;
背景:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465“)无重复中心;
背景尺寸:封面;
-webkit过滤器:模糊(13px);
-moz滤波器:模糊(13px);
-o-滤波器:模糊(13px);
-ms过滤器:模糊(13px);
过滤器:模糊(13px);
位置:绝对位置;
左:0;
排名:0;
}
p{
位置:绝对位置;
左:0;
排名:0;
}
跨度{
颜色:蓝色;
字体大小:50px;
字体大小:粗体;
位置:相对位置;
位置:绝对位置;
z指数:9999;
-webkit过滤器:模糊(0px);
-moz滤波器:模糊(0px);
-o-滤波器:模糊(0px);
-ms过滤器:模糊(13px);
过滤器:模糊(0px);
}
但我只有css文件,没有html文件,请给我发送可用html的解决方案structure@KashifWaheed:您必须在
伪元素之后使用:进行一些修改。以下是顶部图像的html
我不会让你去布莱恩德里斯先生那里还有其他人吗?我的问题仍然存在
<div>
</div>
<p><span>WOW</span></p>
div {
height:500px;
width:100%;
text-align:center;
background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
background-size:cover;
-webkit-filter: blur(13px);
-moz-filter: blur(13px);
-o-filter: blur(13px);
-ms-filter: blur(13px);
filter: blur(13px);
position: absolute;
left:0;
top: 0;
}
p {
position: absolute;
left:0;
top: 0;
}
span {
color:blue;
font-size:50px;
font-weight:bold;
position:relative;
position:absolute;
z-index:9999;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(13px);
filter: blur(0px);
}