我可以将文字背景设置为模糊图像吗？

有没有办法在图像上设置文字模糊背景？像我可以将文字背景设置为模糊图像吗？

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

我可以将文字背景设置为模糊图像吗？

回答

相关问题