模糊背景不影響div

-1

如何讓背景模糊但div是否正常？這有可能做到嗎？在DIV模糊背景不影響div

body 
 
{ 
 
    background-color:#333; 
 
    padding:1px; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 

 
} 
 
div{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#ccc; 
 
    }

<div>test</div>

來源

2015-04-07 Im Happy

貴'body'實際上有一個背景 - ** **形象？或者只是'＃333'顏色？ –

無法在此上下文中使用-ms篩選器，它僅適用於使用IE9棄用的特殊篩選器。瀏覽器還不支持現代過濾器，只在svg內。 – Shikkediel

使用箱陰影：

body{ 
 
    background-color:#333; 
 
    padding:1px; 
 
} 
 
div{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#ccc; 
 
    margin:10px; 
 
    box-shadow: 0 0 10px 10px #ccc; 
 
}

<div>test</div>

來源

2015-04-07 02:25:22

如果你模糊的元素，它會模糊該元素中的所有內容，以及（不只是背景）。但是，您可以模糊其中包含圖像的div，並將其內容放在旁邊的其他元素中。

div.bg{ 
 

 
/* here is just div sizing and positioning */ 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: -1; 
 
    height: 300px; 
 
    width: 500px; 
 

 
/* background image */ 
 
    background: #ccc url('https://farm3.staticflickr.com/2255/2539937014_dc7c24f98a_o.jpg') center center no-repeat; 
 

 
/* blur the element */ 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
}

<div class="bg"> </div> 
 
<div> 
 
    <h1>No Blur Here</h1> 
 
    <p>More content, not blurred</p> 
 
</div>

來源

2015-04-07 02:35:45 DACrosby

模糊背景不影響div

回答

相關問題