在div中的图像或图像上放置插入框阴影
我的页面上有一个图像,我想在其上放置一个插入框阴影.我已尝试用div中的图像进行此操作.任何人都可以帮助我显示插入框阴影吗？
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;
}
Hit*_*dha 11
Box-shadow插图不适用于图像,您需要创建一个div并为该div提供box-shadow并将图像放入该div中.
您还可以在img元素上使用负z-index,并在div元素上使用带有插入值的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;
}
- 这里重要的一点似乎是`position:relative`,否则图像不能放在它的父元素后面.但不幸的是,如果那些图像没有负z-index,那么图像会移动到所有其他父对象后面. (3认同)
这是一种干净、简单和现代的 CSS 伪元素方法，用于在“图像顶部”放置框阴影，因为img标签本身不支持伪元素。
HTML：
<div class="box-shadow">
<img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>
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;
}
查看随附的JSFiddle。
提出z-index的其他答案如果放入上下文就有问题,在我的情况下,图像消失在主div之后.防止这种情况涉及将z-index: 1;(和非静态位置)设置到所有祖先元素,这是有问题的,并且可能破坏许多现有布局.
我找到了一个干净的解决方案,不需要触及所有祖先元素.
我终于在了解z-index - Stacking Context的帮助下弄明白了
HTML
标记保持如下:
<div class="box-shadow">
<img src="/images/graphic.jpg" />
</div>
挑战在于将包装器div和图像放入单个堆叠上下文中.为此,您必须将样式应用于父元素.
堆叠上下文CSS
根据链接文章,以下元素创建堆叠上下文:
- 根元素(HTML),
- 定位(绝对或相对)z-index值不是"auto",
- z-index值不是"auto"的flex项,
- 不透明度值小于1的元素.(参见不透明度规范),
- 变换值不是"none"的元素,
- 混合混合模式值不是"正常"的元素,
- 隔离设置为"隔离"的元素,
- 在移动WebKit和Chrome 22+上,position:fixed总是创建一个新的堆叠上下文,即使z-index是"auto"
- 指定上面的任何属性将改变即使你不直接写自己
如果我们专注于这个用例是有意义的选项,我们有这些选择,假设父元素的.box-shadow元素是#parent:
1.定位和z指数:
如果可能的话,我会选择这个:
#parent {
position: relative;
z-index: 0;
}
2.不透明度
如果父元素需要具有不同的位置属性或添加z-index具有不需要的副作用,则可以使用几乎为 1 的不透明度值,以使其没有可见效果,但仍会创建堆叠上下文:
#parent {
opacity: 0.999;
}
最后,影子CSS
然后你可以在div上应用阴影并使用z-index移动它后面的img:
.box-shadow {
box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
display: block;
position: relative;
z-index: -1;
}
- `display:block`不是盒阴影工作所必需的,而是用于精确定位.我认为这是因为作为一个内联元素(即没有display:block),你必须指定`vertical-align`和`line-height`才能在图像上方或下方没有边距. (2认同)
这里发布的大多数解决方案的父元素都有问题，对此的一个简单解决方案是使用伪元素：
.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>noo*_*oob -3
.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"/>