CSS模糊背景的一面

所以，我有一個非常簡單的div容器。CSS模糊背景的一面

<div class="container"><div class="inside"></div></div>

和CSS：

.container{ 
width:200px; 
height:100px; 
background-color:#dc5562; 
} 
.inside{ 
width:150px; 
height:50px; 
margin:20px; 
background-color:rgba(50,80,115, 0.4); 
opacity: 1; 
}

我想使inside div的底部模糊，因此，它似乎只是模糊了或平滑掉（因此沒有明顯的邊界線）

我發現了一些在線幫助，但他們似乎與背景圖像一起工作。

任何幫助將不勝感激！

謝謝！

來源

2016-11-16 steve Kim

你應該檢查這個http://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur - 爲重疊效果工作 –

如果您可以顯示預期輸出的圖像，那會更好。 –

試試這一個。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
\t .container{ 
 
\t \t width:200px; 
 
\t \t height:100px; 
 
\t \t background-color:#dc5562; 
 
\t } 
 
\t .inside{ 
 
\t \t width:150px; 
 
\t \t height:50px; 
 
\t \t margin:20px; 
 
\t \t background: #985369; 
 
\t \t background: -moz-linear-gradient(top, #985369 0%, #985369 50%, #985369 51%, #dc5562 100%); 
 
\t \t background: -webkit-linear-gradient(top, #985369 0%,#985369 50%,#985369 51%,#dc5562 100%); 
 
\t \t background: linear-gradient(to bottom, #985369 0%,#985369 50%,#985369 51%,#dc5562 100%); 
 
\t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#985369', endColorstr='#dc5562',GradientType=0); 
 
\t } 
 
\t </style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="inside"> 
 

 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

您可以生成自己的漸變色here

來源

2016-11-16 04:48:41 Nitheesh

更改：

background-color:rgba(50,80,115, 0.4);

到

background:linear-gradient(to bottom,rgba(50,80,115, 0.4), rgba(50,80,115, 0.3),rgba(50,80,115, 0.2),rgba(50,80,115, 0));

來源

2016-11-16 04:41:19 RizkiDPrast

你可以使用漸變來獲得這種效果。

更多linear-gradient

.container { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #dc5562; 
 
    position: relative; 
 
} 
 
.inside { 
 
    width: 150px; 
 
    height: 50px; 
 
    margin: 20px; 
 
    background: -webkit-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562); 
 
    background: -o-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562); 
 
    background: -moz-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562); 
 
    background: linear-gradient(rgba(50, 80, 115, 0.4), #dc5562); 
 
}

<div class="container"> 
 
    <div class="inside"> 
 

 
    </div> 
 
</div>

來源

2016-11-16 04:48:52 Sreekanth

CSS模糊背景的一面

回答

相關問題