如何使用CSS對圖像進行磨砂處理（非玻璃狀）外觀？

Question

我想用非玻璃顯示器顯示圖像。與以下類似，

我正在使用圖像。我想用啞光效果來表明。

正常圖像：

粉嫩：

我不能在網上找到它。可能是我沒有使用正確的搜索關鍵字。任何人都可以幫助我嗎？

Answer 1

內部的容器我把圖像與對比度降低/亮度/飽和加模糊（由CSS filter所做的所有這四種效果）的一點點。圖像可能已被放置爲容器背景，但我想要應用這些過濾器以便將其分開。

之後，一個覆蓋整個區域的透明度爲的彩色圖層。該字母表示可以是任何內容的頁面內容。

UPDATE：多個過濾器必須是成一排，就像它是在這個最新的更新：

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0px; 
 
    font-family: Georgia, serif; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: navy; 
 
    overflow: hidden; 
 
} 
 

 
#thepic { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    object-fit: cover; 
 
    -webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%); 
 
    filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%); 
 
} 
 

 
#color_layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: navy; 
 
    opacity: 0.3; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    display: inline-block; 
 
    color: white; 
 
    text-shadow: 1px 2px 2px #000; 
 
    font-size: 4em; 
 
    font-weight: 100; 
 
    letter-spacing: 2px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#letter { 
 
    vertical-align: middle; 
 
}

<div id=container> 
 
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg"> 
 
<div id=color_layer></div> 
 
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1>&nbsp;書面</h1></span> 
 
</div>

Answer 2

@ freestock.tk - 這是我腦子裏的念頭也。

這裏的另一種方式用更少的標記來做到這一點：

img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.container { 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 
.container:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<div> 
 
    <h1>Original Image</h1> 
 
    <img src="http://i.imgur.com/WjbwTUH.jpg"> 
 
</div> 
 

 
<div class="container" id="content"> 
 
    <h1> With Transparent Overlay </h1> 
 
    <img src="http://i.imgur.com/WjbwTUH.jpg"> 
 
</div>

在這個例子中，我把圖像是相對定位的容器內。 z-index是-1，所以它會在下一層之後。

然後我使用了一個絕對定位的僞元素，這樣它將在容器的整個寬度上伸展並覆蓋圖像。正z-索引將其設置在第一層的頂部。我沒有設置不透明度，而是使用rgba值作爲背景顏色。前三個數字或紅色，綠色和藍色的值與往常一樣，但最後一個數字是0到1之間的一個小數，用於設置不透明度級別。我把它做得比你想要的要深一點，所以你可以看到它們的區別。您也可以選擇不同的顏色以適合您的圖像。

參考：http://nicolasgallagher.com/css-background-image-hacks/