CSS 在 div 中的图像或图像上放置插入框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8771178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
putting a inset box shadow on an image or image within a div
提问by Matt Murphy
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?
我的页面上有一个图像，我想在上面放置一个插入框阴影。我曾尝试对 div 的内外图像进行此操作。谁能帮我显示一个插入框阴影？
HTML:
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
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;
}
回答by Hitesh Modha
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.
Box-shadow inset 不适用于图像，您需要创建一个 div 并为该 div 提供 box-shadow 并将图像放入该 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.
您还可以在 img 元素上使用负 z-index，并在 div 元素上使用带有 inset 值的 box-shadow。
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;
}
回答by Fabian Schmengler
The other answers that propose z-index have an issue if put into context, in my case the image disappeared behind the main div. Preventing this involves setting z-index: 1;(and non static position) to all of the ancestor elements, which is problematic, and may break a lot of existing layout.
如果放在上下文中，建议 z-index 的其他答案有问题，在我的情况下，图像消失在主 div 后面。防止这种情况涉及z-index: 1;为所有祖先元素设置（和非静态位置），这是有问题的，并且可能会破坏许多现有布局。
I found a clean solution that doesn't require having to touch all ancestor elements.
我找到了一个不需要接触所有祖先元素的干净解决方案。
I finally figured it out with the help of Understanding z-index - The Stacking Context
我终于在Understanding z-index - The Stacking Context的帮助下弄明白了
HTML
HTML
The markup stays like this:
标记保持如下：
<div class="box-shadow">
<img src="/images/graphic.jpg" />
</div>
The challenge is to put the wrapper div and the image into a single stacking context. For this you have to apply styles to the parentelement.
挑战在于将包装器 div 和图像放入单个堆叠上下文中。为此，您必须将样式应用于父元素。
Stacking Context CSS
堆叠上下文 CSS
According to the linked article, the following elements create a stacking context:
根据链接的文章，以下元素创建了堆叠上下文：
- the root element (HTML),
- positioned (absolutely or relatively) with a z-index value other than "auto",
- a flex item with a z-index value other than "auto",
- elements with an opacity value less than 1. (See the specification for opacity),
- elements with a transform value other than "none",
- elements with a mix-blend-mode value other than "normal",
- elements with isolation set to "isolate",
- on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"
- specifing any attribute above in will-change even you don't write themselves directly
- 根元素（HTML），
- 使用“auto”以外的 z-index 值定位（绝对或相对），
- z-index 值不是“auto”的弹性项目，
- 不透明度值小于 1 的元素。（参见不透明度规范），
- 具有除“none”以外的变换值的元素，
- 具有除“正常”以外的混合模式值的元素，
- 隔离设置为“隔离”的元素，
- 在移动 WebKit 和 Chrome 22+ 上， position: fixed 总是会创建一个新的堆叠上下文，即使 z-index 为“auto”
- 即使您不直接编写自己，也可以在 will-change 中指定上面的任何属性
If we focus on the options that make sense for this use case, we have these alternatives, assuming the parent element of the .box-shadowelementis #parent:
如果我们专注于这个用例是有意义的选项，我们有这些选择，假设父元素的.box-shadow元素是#parent：
1. Positioning and z-index:
1.定位和z-index：
This is what I would choose if possible:
如果可能的话，我会选择：
#parent {
position: relative;
z-index: 0;
}
2. Opacity
2. 不透明度
If the parent element needs to have a different position attribute or adding z-index has unwanted side effects, you can use an opacity value that's almost1, so that it has no visible effect but still creates a stacking context:
如果父元素需要具有不同的位置属性或添加 z-index 有不需要的副作用，您可以使用接近1的不透明度值，这样它就没有可见的效果，但仍会创建堆叠上下文：
#parent {
opacity: 0.999;
}
Finally, the shadow CSS
最后，阴影 CSS
Then you can apply the shadow on the div and move the img behind it with z-index:
然后你可以在 div 上应用阴影并使用 z-index 将 img 移动到它后面：
.box-shadow {
box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
display: block;
position: relative;
z-index: -1;
}
回答by boskop
Most of the solutions posted here have problems with the parent elements, a simple solution to this, is using pseudo elements:
此处发布的大多数解决方案都存在与父元素有关的问题，对此的一个简单解决方案是使用伪元素：
.box-shadow
{
background-color: #fff;
height: 235px;
margin: 32px 24px;
text-align: center;
width: 500px;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.box-shadow::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px 10px #000;
box-shadow: inset 0 0 10px 10px #000;
border-radius: 50%;
overflow: hidden;
}<div class="box-shadow">
<img src="http://www.google.com/logos/2012/addams11-hp.jpg" />
</div>回答by rjb
Here's a clean, simple and modern approach of CSS pseudo-elements to place a box shadow “on top of an image”, since imgtags themselves don't support pseudo-elements.
这是一种干净、简单和现代的 CSS 伪元素方法，用于在“图像顶部”放置框阴影，因为img标签本身不支持伪元素。
HTML:
HTML：
<div class="box-shadow">
<img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>
CSS:
CSS：
.box-shadow {
position: relative;
text-align: center;
}
.box-shadow::after {
box-shadow: inset 0 0 10px 10px #000;
bottom: 0;
content: "";
display: block;
left: 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.box-shadow img {
max-width: 100%;
width: auto;
}
View the accompanying JSFiddle.
查看随附的JSFiddle。
回答by noob
.backing {
position:relative;
z-index:-10;
float:left;
margin-left:12%;
box-shadow: inset 0 0 50px 50px #FFF;
-moz-box-shadow: inset 0 0 50px 50px #FFF;
-webkit-box-shadow: inset 0 0 50px 50px #FFF;
}
.next {
position:relative;
margin-left:8%;
z-index:200;
}
.back {
position:relative;
margin-left:2%;
z-index:220;
}<div id="logo">
<img src="//picsum.photos/100" width="3%" height="3%"/>
</div>
<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>
<img src="//picsum.photos/650" width="650" height="650" class="backing"/>