模糊背景图像 [英] blur background image only

问题描述

你可以看到在链接中给出的页面顶部的两个图像是模糊一个是背景图像和一个是上面的图像它都是模糊我想要的是模糊的背景图像不是顶部我不知道如何做它请帮助这里是链接 http：// www .node.au.com / projects / at38 /

as you can see the are two images on top portion of the page that is given in the link that are blur one is background image and one is the image above it both are blur what i want is to blur the background image only not the top one i dont know how to do it please help here is the link http://www.node.au.com/projects/at38/

这是我的css

 #work-gallery 
  {
   background-repeat:no-repeat;
   background-size:cover;
   -webkit-filter: blur(5px);
  }

这是我不想模糊的顶部图片的html

this is the html of the top image which i don't want to blur

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

CSS ：

#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-filter 会影响你应用它的元素的子元素，所以你必须移动背景。

The -webkit-filter will affect the children of the element that you're applying it to, so you have to move the background out.

这篇关于模糊背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！