對整個div的磨砂玻璃效果無法正常工作

我想讓div完全被另一個看起來像磨砂玻璃的圖層覆蓋。磨砂玻璃下的div將成爲我敏感網站的背景。它可以是漸變或只是像我的小提琴一樣的圖片。我設法覆蓋了效果的div。然而，圖層的邊緣之間仍然有一點差距，但我想要覆蓋整個div的效果。謝謝。要解決這個問題對整個div的磨砂玻璃效果無法正常工作

.bg { 
 
    position: absolute; 
 
    background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=); 
 
    width: 100%; 
 
    height: 500px; 
 
    margin: 0; 
 
} 
 

 
.blurred-box { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: inherit; 
 
    overflow: hidden; 
 
} 
 

 
.blurred-box:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    position: absolute; 
 
    left: 0; 
 
    left position right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    top position bottom: 0; 
 
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05); 
 
    filter: blur(10px); 
 
}

<div class="bg"> 
 
    <div class="blurred-box"></div> 
 
</div>

來源

2017-10-10 user3080315

一種方法是設置:after到更大然後容器：

.bg { 
 
    position: absolute; 
 
    background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=); 
 
    width: 100%; 
 
    height: 500px; 
 
    margin: 0; 
 
} 
 

 
.blurred-box { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: inherit; 
 
    overflow: hidden; 
 
} 
 

 
.blurred-box:after { 
 
    content: ''; 
 
    width: 120%; 
 
    height: 120%; 
 
    background: inherit; 
 
    position: absolute; 
 
    left: -10%; 
 
    top: -10%; 
 
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05); 
 
    filter: blur(10px); 
 
}

<div class="bg"> 
 
    <div class="blurred-box"></div> 
 
</div>

來源

2017-10-10 08:36:34 Justinas

你也可以嘗試規模有點模糊圖像容器並在上隱藏溢出：

.bg { 
    overflow: hidden; 
} 

.blurred-box:after { 
    transform: scale(1.08, 1.08); 
}

，並設置bodypadding: 0; margin: 0;擺脫小偏移。有些款式是多餘的。所以，我的嘗試：

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.bg { 
 
    position: relative; 
 
    background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=); 
 
    width: 100%; 
 
    height: 500px; 
 
    overflow: hidden; 
 
} 
 

 
.blurred-box { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
} 
 

 
.blurred-box:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05); 
 
    filter: blur(10px); 
 
    transform: scale(1.08, 1.08); 
 
}

<div class="bg"> 
 
    <div class="blurred-box"></div> 
 
</div>

來源

2017-10-10 08:46:02 curveball

對整個div的磨砂玻璃效果無法正常工作

回答

相關問題