css - putting a inset box shadow on an image or image within a div

Question

Welcome To Ask or Share your Answers For Others

css - putting a inset box shadow on an image or image within a div

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - putting a inset box shadow on an image or image within a div

I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset box shadow to display?

HTML:

<body>

<div id="logo">
<img src="images/key.jpg"  width="3%" height="3%"/>
</div>

<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>

<img src="images/scene1.jpg"  width="650" height="650" class="backing"/>

</body>
</html>

CSS

.backing {
    position:relative;
    z-index:-10;
    float:left;
    margin-left:12%;
    box-shadow: 0 0 -50px -50px  #FFF;
        -moz-box-shadow:  0 0 -50px -50px  #FFF;
        -webkit-box-shadow:  0 0 -50px -50px  #FFF;

}

.next {
    position:relative;  
    margin-left:8%;
    z-index:200;
}

.back {
    position:relative;
    margin-left:2%;
    z-index:220;

}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:09:37+0000

Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.

You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo

Categories

css - putting a inset box shadow on an image or image within a div

css - putting a inset box shadow on an image or image within a div

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags