Как сделать фоновое изображение таким?

162

25 сентября 2019, 18:10

Часто вижу на сайтах что фоновое изображение имеет какой-то эффект, на фоне которого отчётливо видно текст. Не понимаю, то ли это размытие, то ли затемнение. Подскажите, как сделать что-то похожее?

Answer 1

.container { 
  position: relative; 
  margin: auto; 
  width: 300px; 
  height: 300px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: #fff; 
  font-size: 32px; 
  background-image: url('https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg'); 
  z-index: 1; 
} 
 
.container::after { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background-color: rgba(0, 0, 0, 0.5); 
  content: ""; 
  z-index: -1; 
}

<div class="container"> 
  Text 
</div>

Answer 2

Мне кажется, что Вы ищете blur эффект, так называемый эффект размытия. Ниже представлен пример:

body, html { 
  height: 100%; 
  margin: 0; 
  font-family: Arial, Helvetica, sans-serif; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.bg-image { 
  /* The image used */ 
  background-image: url("https://www.w3schools.com/howto/photographer.jpg"); 
   
  /* Add the blur effect */ 
  filter: blur(8px); 
  -webkit-filter: blur(8px); 
   
  /* Full height */ 
  height: 100%;  
   
  /* Center and scale the image nicely */ 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
} 
 
/* Position text in the middle of the page/image */ 
.bg-text { 
  background-color: rgb(0,0,0); /* Fallback color */ 
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */ 
  color: white; 
  font-weight: bold; 
  border: 3px solid #f1f1f1; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 2; 
  width: 80%; 
  padding: 20px; 
  text-align: center; 
}

<div class="bg-image"></div> 
 
<div class="bg-text"> 
  <h2>Blurred Background</h2> 
  <h1 style="font-size:50px">I am John Doe</h1> 
  <p>And I'm a Photographer</p> 
</div>