Частичный градиент для <img>

Question

[Kir Shatrov]

Есть картинка, тегом


Как средствами CSS/JS добиться такого эффекта, не редактируя само изображение?

Answer 1

[Dmitry]

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

CSS z-index и все.
картинка с градиентом нужной тебе ширины высотой в 1 пиксель.
Повторяешь его по оси игрек.

Answer 2

[Александр Белугин]

Можно создать полупрозрачный PNG с градиентом (или целый ассортимент таких файлов) и накладывать поверх помеченных нужным классом картинок средствами JS при загрузке страницы.

Comments

[Kir Shatrov]

Как наложить эту штуку поверх средствами JS?

[Александр Белугин]

HTML:

<div class="gradient-box">
<img src="your-image-here.jpg">
</div>

JS:

html = '<img class="gradient" src="your-gradient-here.png">';
$('.gradient-box').append(html);

CSS:

.gradient-box {position: relative;}
.gradient-box img { height: 100px; width: 100px; position: absolute; left: 0; top:0; z-index: 1;}
.gradient {z-index: 3;}

Примерно так.

Answer 3

[Neonailol]

вот както так

<div id="image">
<img src="0ff35a09.jpg" width="159px" height="110px" alt="qq" class="overlayme" />
<span class="overlayed"></span>
</div>

#image{
	width: 159px;
	height: 110px;
	position:relative;
}
.overlayed{
display:block;
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
background: #FFF;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* firefox */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* ie */
}

Answer 4

[Serator]

При помощи CSS можно использовать свойство mask в паре с SVG. Примеры и описания: developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content