CSS - раздел с прозрачным изображением

Question

Может кто-нибудь объяснить мне, как я делаю что-то подобное на картинке ниже? Это раздел в HTML, CSS, но с прозрачным наложением изображений.

Спасибо за помощь!

"картинка внизу"

Вот ссылка на страницу в реальном времени. Просто нажмите на «превью»: https://yootheme.com/themes/finch

Answer 1

просто добавьте текстуру изображения файла "png" и установите в качестве фонового изображения для div в нижней части ползунка на основе вашего примера. затем добавьте к нему отрицательную маржу. если ползунок наложил текстуру на div, просто добавьте значение z-index.

.your-div{
background-image:url('your-image.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center-center;
margin-top:-25px;
}