只有模糊背景圖像

正如你所看到的是在鏈接中給出的頁面頂部的兩個圖像模糊一個是背景圖像和一個是它上面的圖像都是模糊我想要的是模糊背景圖像只有不頂一個我不知道如何做到這一點，請幫助這裏是鏈接http://www.node.au.com/projects/at38/只有模糊背景圖像

這裏是我的CSS

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

來源

2013-02-06 Kashif Waheed

做一個單獨的背景元素：

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會影響元素的，你把它應用到兒童，所以你必須移出背景。

來源

2013-02-06 00:05:08 Blender

一個解決方案，但我只有css文件我沒有html文件，請給我avaialble HTML結構 –

@KashifWaheed的解決方案：你必須做出一些黑客用一個'：after'僞元素。 – Blender

這裏是頂部圖片的html

\t \t \t \t \t \t \t

–

我發現在fiddle

<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); 
}

來源

2016-11-24 11:44:33 Udara

只有模糊背景圖像

回答

相關問題