如何模糊文本的背景而不模糊文本

Question

HTML

<div class="jumbotron text-white tteesstt text-center">
    <h2 class="text-white" >ABOUT</h2>
    <h3 class="text-white">We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.</h3>
</div>

CSS

.tteesstt {
    background: url('../img/banner/about-suv.png') no-repeat;
    background-size: cover;
}

Answer 1

一个简单的解决方案是将背景元素添加到h2和h3。您可以将背景颜色设置为某种浅灰色，然后添加不透明度，以模仿模糊效果。

这在渲染方面非常有效，并且可以重现，是您的目标。 CSS示例：

.h2 .h3{
background-color: #ffffff;
opacity:0.6;
}

Answer 2

模糊文本的背景，在“.tteesstt”元素中创建一个div，其中包含名为“about-container”的类或任何你想要命名的类，并在里面添加h3标签。添加不透明度到“约 - 容器”容器的背景颜色，如此;

.about-container{ background-color: rgba(0,0,0,0.5);   }