CSS3 градиенты изображения на прозрачный

Question

Можно ли как-нибудь сделать изображение с прозрачным градиентом на фоновом изображении в CSS3?

Я пробовал это: http://jsfiddle.net/meo/e95pw/3/

Цель - создать эффект зеркального отраженияв CSS3.

Я не могу найти цвет фона за отражением, потому что может быть, что есть фоновое изображение или шаблон.

Любой ввод приветствуется.

edit что мне нужно, так это Photoshop Image Mask, но в CSS.

Answer 1

Вы можете достичь этого в чистом CSS3:

http://jsfiddle.net/g105b/xaX6r/

/* Example for webkit only */
img{
    margin: 0;
    padding: 0;
    -webkit-box-reflect: below 1px
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
}

Answer 2

Это не CSS3, но может помочь: Reflection.js для jQuery

Этот скрипт работает во всех браузерах, поддерживающих тег canvas: Firefox 1.5+, Opera 9+, Safari 2+, Camino и Google Chrome. Он также работает в Internet Explorer 6+ с использованием альтернативной техники рисования.

Отражения могут быть добавлены к любому тегу изображения на любом фоне (даже фон изображения!).

Answer 3

Вот демонстрация, которая показывает, что это можно сделать, http://duopixel.com/stack/test.html, проверьте в webkit и Firefox.

Объяснение: единственный способ замаскировать изображение в Firefox - через маски svg: https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content,

Это можно сделать более элегантно (с помощью svg из внешнего источника), но это облегчает понимание.

Фактический код довольно прост, просто ...

mask: url(#id);

Или, если вы хотите сослаться на внешний источник:

mask: url(test.html#id);

Кроме того, кодна моем сервере, потому что вы должны использовать HTML как HTML, в противном случае Firefox игнорирует маску.Это можно сделать через .htaccess следующим образом:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

jsfiddle не обслуживает xhtml / application

Answer 4

Вы можете сложить фоны!

Пример ниже background-image укладывает URL-адрес изображения под линейным градиентом от белого к прозрачному.

Я обнаружил, что градиент должен repeat, а URL-адресдолжна no-repeat

.multi_bg_example {
  background-image   :  linear-gradient(to right, rgb(255,255,255),  rgba(255, 255, 255, 0)),
                        url(http://i.imgur.com/wrRgmR7.jpg);

  background-repeat  : repeat,
                       no-repeat;

  background-position: right,
                       right;
}

документация: Mozilla.org с использованием нескольких фонов CSS