RazoR_Empire
@RazoR_Empire

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

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


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

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

CSS z-index и все.
картинка с градиентом нужной тебе ширины высотой в 1 пиксель.
Повторяешь его по оси игрек.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Можно создать полупрозрачный PNG с градиентом (или целый ассортимент таких файлов) и накладывать поверх помеченных нужным классом картинок средствами JS при загрузке страницы.
Ответ написан
Neonailol
@Neonailol
hardcore
вот както так
<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 */
}
Ответ написан
Комментировать
@Serator
При помощи CSS можно использовать свойство mask в паре с SVG. Примеры и описания: developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы