Я пытаюсь получить размытое изображение div, используя свойство filter: blur(<x>px). То, что я сделал, это 3 деления. Первый div, в самом конце, имеет тень от коробки. Второе деление, посередине (все с точки зрения z-индекса), имеет размытое изображение. У самого переднего div есть текст.
Я немного достиг желаемого эффекта, однако проблема в том, что размытое фоновое изображение создавало эффект тени в виде рамки вокруг границы элементов div. То, что я хочу, это чтобы размытое изображение было только до границ его div и имело эффект только тени от самого заднего div.
Пример (просмотр полной страницы для просмотра div):
#last_div,
#middle_div,
#front_div {
top: 240px;
border-radius: 10px;
width: 700px;
height: 300px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
#last_div {
box-shadow: 0px 0px 60px -30px rgba(0, 0, 0, 0.75);
background-color: transparent;
z-index: 0;
}
#middle_div {
background-image: url("https://mattamyhomes.com/~/media/images/mattamywebsite/corp/home/heroslideshow/usa/orlando/orl_geohero_04_1600x800.jpg");
background-repeat: no-repeat;
background-size: 1000px auto;
filter: blur(30px);
z-index: -1;
}
#front_div {
color: white;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: 'Arial';
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="last_div"></div>
<div id="middle_div"></div>
<div id="front_div">
<div>This is some text</div>
</div>
</body>
</html>