插圖模糊不工作？ CSS

我一直在試圖在圖像上做一個插圖模糊，從我讀的時候有兩種方法可以做到這一點。我嘗試了兩種方法。插圖模糊不工作？ CSS

我現在擁有的是，我將圖像封裝在一個div中，並試圖使用z-index將div與圖像上方的模糊放在一起，但是，我根本沒有看到div。

#mainpicdiv { 
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9); 
width: 100%; 
margin-top: 3%; 
position: relative; 
z-index: 1; 
} 

#mainpic { 
width: 100%; 
margin-top: 3%; 
margin: 0 auto; 
padding: 0%; 
position: relative; 
z-index: -2; 
}

來源

2017-08-16 Kaitlin Danson

是否可以讓你的代碼？ – zynkn

這裏有一個很好的答案：https：//stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images。基本上，您添加的插頁邊界總是低於圖像。相反，將它放在絕對定位的容器中。該文章描述了這一點。 –

您可以使用完全高度和寬度的psuedo-element添加到包裝圖像的div中。 img代碼不支持盒陰影

#mainpicdiv { 
    position: relative; 
} 

#mainpicdiv:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9); 
} 

#mainpicdiv > img { 
    width: 100%; 
    display: block; 
}

工作例如：https://jsfiddle.net/hz70mc13/1/

來源

2017-08-16 06:45:47

插圖模糊不工作？ CSS

回答

相關問題