对整个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的磨砂玻璃效果无法正常工作

回答

相关问题