box-shadow inset и img

[bookin]

Есть див в котором помещена картинка

<div>

<img src=""/>

</div>

К диву применена внутренняя тень CSS3

box-shadow : 0 1px 2px rgba(0, 0, 0, 0.6) inset;

В итоге изображение перекрывает эту тень, как можно это побороть?

Заранее благодарен.

[Viper]

Адекватно: изображение заменить на background.

Для других вариантов, желательно видеть, что долго получиться... И будете ли вы знать заранее размеры изображения?

Edited April 22, 2012 by Viper

[bookin]

Адекватно: изображение заменить на background.

Для других вариантов, желательно видеть, что долго получиться... И будете ли вы знать заранее размеры изображения?

Вот к примеру изображение перекрывает тень блока, в котором находится.

На бекграунд положить не могу, не знаю размеров изображения.

[hypnocolor]

Набросал пример. Для картинки установлены свойства position: relative и z-index: -1. От него, думаю, можно отталкиваться) Edited April 23, 2012 by hypnocolor

[bookin]

Набросал пример. Для картинки установлены свойства position: relative и z-index: -1. От него, думаю, можно отталкиваться)

Спасибо, вы бы не могли пояснить почему работает именно с отрицательным z-indeх?

как я понимаю при таком подходе нельзя использовать фон блока, т.к. он так же ложится поверх изображения линк

[hypnocolor]

bookin, да, вы правы. Мой вариант подходит, если нужно придать внутреннюю тень отдельному изображению без каких-либо следующих за ним элементов. Попробовал поиграть с css, и пришёл к выводу, что в вашем случае, действительно, адекватнее всего будет выход с фоновым изображением.

[bookin]

bookin, да, вы правы. Мой вариант подходит, если нужно придать внутреннюю тень отдельному изображению без каких-либо следующих за ним элементов. Попробовал поиграть с css, и пришёл к выводу, что в вашем случае, действительно, адекватнее всего будет выход с фоновым изображением.

Нашел еще одно решение через before (линк), но так как у меня все стиле на блоке, а в блоке все ссылки, которые после данного метода не работают, то мне он не подходит, а вообще довольно интересно

[pudge]

странно у меня не один из способов не сработал...как будто сам бог нехочет что бы у моего изображения была внутреняя тень.

[Memphismax]

Добрый день, может кто то поможет. У меня следующая ситуация, есть шаблон сделаный под joomla, все работает кроме тени. Когда страница менее наполнена блоками, тень подтягивается к блоку по вертикале, по горизонтали она обтекает нормально. Как сделать что бы она обтекала окно по вертикале.

box-shadow: inset 0 0 20px rgba(168, 161, 172, 0.8);

код тени

 

окно сайта http://i058.radikal.ru/1403/ce/8c87cc5cacbd.jpg