我可以將文字背景設置爲模糊圖像嗎？

有沒有辦法在圖像上設置文字模糊背景？像我可以將文字背景設置爲模糊圖像嗎？

h1 { 
 
    text-align: center; 
 
    background-color: <blurry>; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <h1>The Last Will and Testament of Eric Jones</h1> 
 
    </body> 
 
</html>

編輯大部分的解決方案的在線演示如何模糊圖像。我正在尋找的是將模糊濾鏡僅應用於文本元素的背景。我不知道你是否可以在h1元素內設置它。

來源

2016-12-03 Quang Thinh Ha

這是你想要的嗎？ http://codepen.io/chriscoyier/pen/yyOodm/ – ntahoang

在這個例子中，我使用的圖像作爲背景的虛化效果更明顯，但如果你想通過顏色來改變形象，只需更換與背景背景圖像屬性-color：＃000000;

請注意＃000000是您希望的十六進制顏色，所以您應該重寫此值。

<body> 
    <div class="background"> 
    </div> 
    <h1 class="text"> The Last Will and Testament of Eric Jones</h1> 
</body>

CSS：

.background { 
    position: absolute; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    display: block; 
    background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'); 
    width: 1200px; 
    height: 800px; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 
.text { 
position: relative; 
z-index: 3; 
}

Look at the example I made

來源

2016-12-03 15:33:21

來自初學者（y）的Gud工作:) welcome SO – jafarbtech

謝謝：D（y） –

只要增加透明度

.element{ 
    opacity : 0.1; 
}

來源

2017-05-17 02:01:55

我可以將文字背景設置爲模糊圖像嗎？

回答

相關問題