изображение непрозрачности от 0 до 1 с помощью CSS

Я хочу, чтобы мои изображения, чтобы выглядеть так:изображение непрозрачности от 0 до 1 с помощью CSS

Нижняя часть изображения прозрачной, и к началу его попадающего в непрозрачности 1. я могу сделать этот эффект с цвет с линейным градиентом:

-webkit-linear-gradient(black, transparent);

Но возможно ли это с изображениями?

источник

2013-08-27 T_01

Что позади изображения? –

Использовать статический PNG с прозрачностью, или вам нужно его анимировать? – Jonathan

Ничего особенного в javascript и в холсте не исправить. – enhzflep

Самый новый и самый крутой способ использования маски HTML 5.

Это выглядит следующим образом:

CSS:

.masked 
{ 
    mask: url(#m1); 
}

HTML 5:

<svg width="0" height="0"> 
    <defs> 
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%"> 
     <stop stop-color="white" offset="0"/> 
     <stop stop-color="black" offset="1"/> 
    </linearGradient> 

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <rect y="0.1" width="1" height="0.9" fill="url(#gradient)" /> 
    </mask> 
    </defs> 
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350"> 
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg" 
      width="500" height="350" class="masked"></image> 
</svg>

jsFiddle Demo

Для дальнейшего чтения:

источник

2013-08-27 21:30:21 Itay

Ничего себе, спасибо вам первым. Но теперь я должен удалить каждую строку, чтобы посмотреть, что она делает, и как она работает. ^^ –

Это просто пример. Возьмите 10 минут, чтобы прочитать об этом и посмотреть живой пример. Это не так сложно. – Itay

О, я вижу, что вы только что отправили пример с сайта sry –

Мои попытки с помощью CSS :)

Codepen Например: http://cdpn.io/hzBav

CSS (Обновление с FADEOUT)

figure { 
    display: inline-block; 
    position: relative; 
} 

.overlay { 
    display: block; 
    height: 300px; 
    position: absolute; 
    width: 300px; 

    background-image: -moz-linear-gradient(
    rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 85% 
); 
} 

.overlay:after { 
    content: ''; 
    display: block; 
    height: 300px; 
    width: 300px; 

    background-image: -moz-linear-gradient(
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100% 
); 
}

HTML

<figure> 
    <div class='overlay'></div> 
    <img src='http://placekitten.com/300/300' /> 
</figure>

Обновление на основе комментариев.

источник

2013-08-27 21:38:23 kunalbhat

Это хорошо, но изображение не станет прозрачным. – Itay

Да, я уже подумал об этом, но проблема в том, что вы можете просто «угаснуть», например, если у вас есть черный фон, вы можете используйте этот метод. Но это не решение реальной проблемы. –

Я обновил, но это не очень удачно, потому что теперь вы можете едва видеть изображение, ха-ха! – kunalbhat

изображение непрозрачности от 0 до 1 с помощью CSS

ответ

Смежные вопросы