Белая полоса на изображениях в css?

Question

Мне нужно сделать белые полосы на изображении. Как и это на изображении заголовка, есть детские и есть белая полоса.Те же самые белые полосы можно показать на изображении ниже отчета об устойчивом развитии. Хотя они используют изображение с этими полосами.Любая идея, как это можно реализовать в css или css3 с любым изображением.

Answer 1

Этот или какой-то другой вариант должен работать:

HTML:

<div class="image"><img src="whatever-you-like.gif"><div></div></div>

CSS:

.image { position: relative; }
.image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(stripes.png); }

Stripes.png должен быть 24-битИзображение PNG с низким альфа-значением.

Обратите внимание, что в этой реализации вам не нужно использовать исходное изображение в качестве фона CSS, вы можете использовать тег изображения как обычно (просто с дополнительным HTML вокруг него).).

Answer 2

Вы можете использовать исходное изображение в качестве фона, а поверх него использовать изображение .png с этими элементами и прозрачностью.