Непрозрачность исчезает на изображении с помощью CSS3 или JS?

Question

Есть ли способ с Javascript или CSS3, чтобы левая и правая сторона изображения исчезали на заднем плане.

Answer 1

<div style="position:relative;height:100px;width:100px">
    <div style="position:absolute;z-index:2;width:100%;height:100%;-moz-box-shadow: inset 0 0 5px 5px #fff;-webkit-box-shadow: inset 0 0 5px 5px #fff;box-shadow: inset 0 0 5px 5px #fff;"></div>
    <img style="position:absolute;z-index:1"src="images/my100.png"></img>
</div>

Это привело к тому, что белое угасание было со всех сторон. Проверьте некоторые тени от ящиков здесь css http://www.css3.info/preview/box-shadow/

Answer 2

Я использовал

    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Это можно использовать непосредственно для элемента или родительского элемента и при этом влиять на дочерние элементы.Это великолепно!Работает только с webkit.

Answer 3

Вы можете наложить изображение PNG поверх изображения, чтобы получить желаемый эффект. IE не отображает частично прозрачные изображения PNG должным образом. Для этого браузера вам нужен обходной путь, например IE PNG Fix .

Демо здесь

В современных браузерах вы можете использовать свойство CSS3 box-shadow для этой цели.

Демоверсия CSS3 здесь

Answer 4

Не думаю, что такой эффект доступен в jQuery или jQuery UI.Вам придется попробовать сторонние плагины, если вы собираетесь JavaScript решение.

Я думаю, что это возможно через Css, но не уверен насчет кросс-браузерной поддержки этой функции.

Answer 5

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