Box-shadow property: inset does not work in img

Question

Box-shadow property: inset does not work in img

Navigation

#1 by (0 votes)
#2 by (-2 votes)

3

I was testing the box-shadow property to make a gallery and realized that the <img> tag does not accept box-shadow:inset... but accepts box-shadow normal.

However if I put <img> as the background of a div the box-shadow:inset works perfectly!

My question would be: How to put box-shadow: inset without having to use the image as background?

Simple template to exemplify

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
div { 
    width: 200px;
    height: 200px;
    margin: 40px 0;
    background-image: url(http://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='http://fillmurray.com/200/200' alt=''/>
<img class="ds" src='http://fillmurray.com/200/200' alt=''/>

NOTE: I also tried with the property filter:drop-shadow but it does not have the option of inset

html css css3 imagem webdesign

asked by anonymous 30.11.2017 / 12:16

2 answers

What's wrong with this while? O || it's not working [closed] Two parameters with String.Format in an asp: HyperLink

score 0 · Answer 1

I think I've identified the problem that box-shadow:inset does not work in <img> and is briefly due to the fact that the image is an element of type Replaced element

See what the Mozilla documentation says about the Replaced element

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

Translation: "In CSS, a superseded element is an element whose representation is outside the scope of CSS, they are external objects whose representation is independent of the CSS formatting template."

Source: link

W3C says:

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.

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

em>

Source: link

Maybe this is why rendering of the image is above box-shadow:inset since the content control of the (src) image is not defined by CSS.

Notice that in this code I did an experiment using the property object-fit and object-position to move the image inside the " container " itself. Notice that the shadow is there, but it is below the content of the image (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: In Chrome and Firefox you can see the test, but make sure your browser supports object-fit : link

score -2 · Answer 2

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