Question

有没有办法在图像上设置文本模糊的背景？像

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元素内设置它。

Answer 1

在此示例中，我使用图像作为模糊效果的背景更加明显，但如果您想通过颜色更改图像，只需替换 背景图像 属性 背景颜色：＃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

Answer 2

只需添加不透明度

.element{
  opacity : 0.1;
}

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

2 个答案: