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

#html #css #css3 #вёрстка

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


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

Ответы

Ответ 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;
}

  Content


  Content