3

Eu estava testando a propriedade box-shadow para fazer uma galeria e percebi que a tag <img> não aceita o box-shadow:inset... porém aceita o box-shadow normal.

No entanto se eu colocar a <img> como background de uma div o box-shadow:inset funciona direitinho!

Minha dúvida seria: Como colocar o box-shadow:inset sem ter que usar a imagem como background?

Modelo simples para exemplificar

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
div { 
    width: 200px;
    height: 200px;
    margin: 40px 0;
    background-image: url(//www.fillmurray.com/200/200);
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.bs {
    display: block;
    margin: 40px 0;
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.ds {
    filter: drop-shadow(0px 0px 10px red);
    -webkit-filter: drop-shadow(0px 0px 10px red);
}
<div></div>
<img class="bs" src='https://i.sstatic.net/oWdCL.png' alt='' height="200"/>
<img class="ds" src='https://i.sstatic.net/oWdCL.png' alt=''/>

OBS: também tentei com a propriedade filter:drop-shadow mas ela não tem a opção de inset

4 Respostas 4

1

Acho que identifiquei o problema sobre o fato do box-shadow:inset não funciona na <img> e resumidamente se deve ao fato da imagem ser um elemento do tipo Replaced element

Veja o que a documentação da Mozilla diz sobre os Replaced element

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Tradução: "Em CSS, um elemento substituído é um elemento cuja representação está fora do escopo do CSS; eles são objetos externos cuja representação é independente do modelo de formatação CSS."

Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

A W3C fala que:

For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. ... The content of replaced elements is not considered in the CSS rendering model.

Tradução: "Por exemplo, o conteúdo do elemento HTML IMG é frequentemente substituído pela imagem que seu atributo "src" designa. ... O conteúdo dos elementos substituídos não é considerado no modelo de renderização CSS.

Fonte: https://www.w3.org/TR/CSS21/conform.html#replaced-element

Talvez por isso a renderização da imagem fique por cima do box-shadow:inset já que o controle do conteúdo da imagem (src) não é definido pelo CSS.

Repare que nesse código eu fiz um experiência usando a propriedade object-fit e object-position para deslocar a imagem dentro do próprio "container". Repare que a sombra está lá, mas ela fica por baixo do conteúdo da imagem (src)

img {
    -webkit-box-shadow: inset 0 0 10px 10px red;
    -moz-box-shadow: inset 0 0 10px 10px red;
    box-shadow: inset 0 0 10px 10px red;
    object-fit: contain;
    object-position: top 25px left 25px;
    border: 1px solid;
}
<img src='https://i.sstatic.net/oWdCL.png' alt=''/>

OBS: No Chrome e Firefox é possível ver o teste, mas certifique-se que o seu browser suporta object-fit: https://caniuse.com/#feat=object-fit

2
  • Uma sugestão, se usar um PNG transparente poderá perceber sem precisar do object-position. Se me permitir gostaria de trocar o link da w3 por esse: html.spec.whatwg.org/multipage/rendering.html#replaced-elements
    – Syzoth
    Commented 15/07/2022 às 13:43
  • @GuilhermeNascimento claro Guilherme, é um favor que vc faz para a comunidade manter as coisas atualizadas dentro do possível. Agradeço pela colaboração, e fique a vontade para editar qq resposta minha, abs :)
    – hugocsl
    Commented 16/07/2022 às 11:17
-1

Olá! Pelo que pesquisei, não é possível aplicar box-shadow:inset em uma tag img. Porém, umsa solução que encontrei foi criar um container vazio e adicionar a imagem como background.

HTML:

<div class="container-img"></div>

CSS:

.container-img {

background-image: url('caminho da imagem');
background-position: center;
background-size: 100%; /* Ajustar */
/* Box shadow: */
-webkit-box-shadow: inset 0 0 11.5px 10px #000000;
-moz-box-shadow: inset 0 0 11.5px 10px #000000;
box-shadow: inset 0 0 11.5px 10px #000000; }
1
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 16/03/2023 às 13:03
-2

Outra maneira de se fazer isso é:

<img src="img/image.jpg" />
<div class="overlay-image"></div>

img {
    display: block;
    width: 250px;
    height: 200px;
}
.overlay-image {
    position: relative;
    margin-top: -200px;
    width: 250px;
    height: 200px;
    box-shadow: 0 0 6px 2px #000 inset;
}
-3

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
img {
    width: 200px;
    height: 200px;
    margin: 40px 0;
    box-shadow: inset 0 0 0 0 #000000, 0 0 10px 7px red, -1px 0px 7px 20px #000000;
}
<img src='//www.fillmurray.com/200/200' alt=''/>

1
  • O estilo que vc colocou está zerado... box-shadow: inset 0 0 0 0 #000000 e a sombra tem que estar por cima da imagem e não para fora da imagem.
    – hugocsl
    Commented 30/11/2017 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .