Как сделать, чтобы filter не применялся к вложениям блока?

Question

[kasti]

Здравствуйте.

>Вот< сам проект. Там есть картинка, и проблема в том, что когда я использую filter: blur(1px), то разные применяется на все вложения, а не только на картинку.

Пытался сделать картинку в отдельном div, но что-то всё улетало не туда и сползало. Игрался с z-index, но без результат но.

То есть нужно сделать, чтобы картинка была в блюре, только картинка. Как видно там ещё тень есть, вот во всех моих попытках её не становилось, только картинка была по верх.

Надеюсь на сдешнюю помощь, спасибо!

Answer 1

[ProjectSoft]

Берёте отдельный див и на него вешает background данной картинки.
td - position relative
для div c background - position absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 0. Применяете blur для данного div.

<td class="td" rowspan="4" width="20%">
	<div class="bg"style="filter: blur(px);background-image: url('https://image.gametracker.com/images/maps/160x120/cs/de_dust2_2x2.jpg');box-shadow:         inset 0px 0px 10px 0px rgba(50, 50, 50, 0.75);"></div>
	<div class="addon-installed" style="-webkit-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);-moz-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);padding-right: 5px;width: max-content;margin-right: -2px;margin-top: -63px;text-align: center;">Сервер выключен =(</div>
</td>

.td {
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left:0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
}
.addon-installed {
  z-index: 1;
  position: relative;
}

И перенесите все инлайновые стили в css файл.