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

Question

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

Answer 1

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

Answer 2

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

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 вокруг него).