Как размыто фон текста, но не текст

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

размытый фон текста, создать DIV внутри элемента «.tteesstt» с классом по имени „о-контейнер“ или что вы хотите назвать его и добавить тег h3 внутри. добавьте непрозрачность к фоновому цвету контейнера «about-container», например;

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