CSS box-shadow не работает

Вопрос: Почему эта тень CSS не работает? HTML CSS IMG { -webkit-box-shadow: inset 0px 0px 108px 7px #000000; -moz-box-shadow: inset 0px 0px 108px 7px #000000; -ms-box-shadow: inset 0px 0px 108px 7px #000000; -o-box-shadow: inset 0px 0px 108px 7px #000000; box-shadow: inset 0px 0px 108px 7px #000000; } Я пробовал это во всех

Вопрос:

Почему эта тень CSS не работает?

HTML

<img src=»http://placecage.com/90/90″ />

CSS

IMG { -webkit-box-shadow: inset 0px 0px 108px 7px #000000; -moz-box-shadow: inset 0px 0px 108px 7px #000000; -ms-box-shadow: inset 0px 0px 108px 7px #000000; -o-box-shadow: inset 0px 0px 108px 7px #000000; box-shadow: inset 0px 0px 108px 7px #000000; }

Я пробовал это во всех браузерах. Я пробовал это в jsFiddle. Я пробовал разные значения. Я пробовал разные способы выразить цвет. Я пробовал много браузеров.

благодаря

Лучший ответ:

тени на inset не работают с элементами изображения.

Один из способов, которым вы можете достичь этого, заключается в том, что другой элемент div перекрывает элемент изображения

Вот пример: http://jsfiddle.net/STcTN/2/

<div class=»img-container»> <img src=»http://placecage.com/90/90″ /> </div> .img-container{ width: 90px; height: 90px; position: relative; } .img-container:after{ content: »; top:0; left:0; right:0; bottom:0; position: absolute; -webkit-box-shadow: inset 0px 0px 10px 7px #000000; -moz-box-shadow: inset 0px 0px 10px 7px #000000; -ms-box-shadow: inset 0px 0px 10px 7px #000000; -o-box-shadow: inset 0px 0px 10px 7px #000000; box-shadow: inset 0px 0px 10px 7px #000000; } Ответ №1

Вы не можете использовать тени вставки CSS3 на изображениях, как описано в этой статье

Лучший способ достичь этой цели – добавить к изображениям элемент абсолютной позиции, привязку или div.

Ответ №2

Вероятно, вам нужно будет содержать ваше изображение и применить к нему тень, или, если возможно, изображение будет использовано в качестве фона для контейнера.

HTML

<div class=»as-img»> <img src=»http://placecage.com/90/90″ /> </div> <div class=»as-background»></div>

CSS

div { width:90px; height:90px; -webkit-box-shadow: inset 0px 0px 108px 7px #000000; -moz-box-shadow: inset 0px 0px 108px 7px #000000; -ms-box-shadow: inset 0px 0px 108px 7px #000000; -o-box-shadow: inset 0px 0px 108px 7px #000000; box-shadow: inset 0px 0px 108px 7px #000000; } img{ opacity:0.5; } div.as-background{ margin-top:20px; width:90px; height:90px; background:url(‘http://placecage.com/90/90’) no-repeat 0 0; }

Вот скрипка

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

Оцените статью
Добавить комментарий