Необходимо наполовину размыть блок

196
04 июля 2017, 20:47

Есть таблица с элементами последний из которых наполовину размыт, вот пример:

можно ли сделать подобный эффект средствами css?

Answer 1

Попробуйте добиться желаемого результата с помощью комбинации свойства opacity и свойства background: linear-gradient()

body { 
  background: url('http://lorempixel.com/output/nature-q-c-640-480-3.jpg'); 
  max-width: 600px; 
} 
 
div { 
  background: #fff; 
  border-radius: 4px; 
  padding: 15px; 
  margin-bottom: 10px; 
} 
 
div.last { 
  background: linear-gradient(0, transparent, #fff); 
  opacity: .4; 
}
<div> 
  Content 
</div> 
<div class="last"> 
  Content 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как выводить ленту постов в зависимости от ширины экрана?
HTML

Как выводить ленту постов в зависимости от ширины экрана?

Есть задача сделать ленту постов, которая будет динамически подстраиваться под ширину экрана пользователяСложность в том, что при достаточно...

 181
Стандарты HTML и CSS
HTML

Стандарты HTML и CSS

Есть какой-то официальный источник со всеми стандартами HTML5 и CSS на русском языке?

 168
PHP Simple HTML DOM Parser, как найти нужную ссылку?
HTML

PHP Simple HTML DOM Parser, как найти нужную ссылку?

Как спарсить нужную ссылку, если на странице много одинаковых классов и номер всегда разный я про [0, и тп

 234
Черную картинку заменять на белую при наведении
HTML

Черную картинку заменять на белую при наведении

Какие есть способы замены черного изображения на белое с помощью css при :hover?

 170