Как можно сделать так [дубликат]

248

17 января 2018, 15:13

На данный вопрос уже ответили:

Сolor css как сделать? 1 ответ

Пытаюсь сверстать на подобие этого. https://imgur.com/a/Iw4fF
Получается такой . https://imgur.com/a/i0655
Как сделать размытие картин как на в первой ссылке ?

 <div class="slick-track">
    <il><a href=""><img src="src/assets/img/slaid3.jpg" alt=""></a></il>
    <il><a href=""><img src="src/assets/img/slaid4.jpg" alt=""></a></il>
    <il><a href=""><img src="src/assets/img/slaid5.jpg" alt=""></a></il>
</div>

.slick-track img {
width: 100%;
height: 50%;
filter: blur(2px);
}

Answer 1

Или можно сделать так

.slick-track {
 width: 100%;
 height: 50%;
 background-image: linear-gradient(blue 0%,blue 100%), url("a.png");
 background-blend-mode: color;

}

В градиенте задаете нужный цвет.

Answer 2

В примере не используется blur(), а просто такой фильтр... Это самый простой вариант...

.slick-track { 
  position: relative; 
  width: 400px; 
  height: 280px; 
  background: url(https://s1.1zoom.ru/b5050/32/250997-frederika_1400x1050.jpg); 
  background-size: cover; 
} 
 
.filter { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: rgba(255, 255, 255, .4); 
}

<div class="slick-track"> 
  <div class="filter"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Допускаются ли пробелы в имени шрифта для свойства font-family?

В документации css-свойства font-family написано, что

236

CSS

Свойство -webkit-font-smoothing

Скажите, пожалуйста, что означает css-свойство -webkit-font-smoothing, какие значения оно может принимать, где можно найти документацию по нему

236

CSS

rgba с сокращением для цвета (white, black и т. д.)

Цвет с прозрачностью можно записать в css используя rgba

229

CSS

не работает закрытие окна на Iphone

Сам код нормально выполняется на компьютере, вылетает всплывающее окно на весь экран с формой, если нажать хоть куда, кроме формы, окно закрываетсяна...

245