Skip to main content
fillmurray quebrado, link substituido
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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='src='https://wwwi.fillmurraysstatic.com/200net/200'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

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='//www.fillmurray.com/200/200' 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

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

URL corrigida
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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='http:src='//www.fillmurray.com/200/200' 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

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='http://fillmurray.com/200/200' 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

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='//www.fillmurray.com/200/200' 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

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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='http://fillmurray.com/200/200' 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