Вопрос:
Почему эта тень 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; }
Вы можете видеть, что тень окна вставки поддерживает фоновое изображение, так как вам нужно уменьшить непрозрачность, чтобы увидеть ее прямо за ней. Надеюсь, это поможет.