您可以使用@R_877_2419@-shadow
,可能是:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
@R_877_2419@-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
@R_877_2419@-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
这样的好处是它将覆盖的背景图像div
,但是当然会模糊(正如您希望从@R_877_2419@- shadow
属性中看到的那样)。要建立density
阴影的阴影,您当然可以添加其他阴影:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
@R_877_2419@-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
@R_877_2419@-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
因为我意识到,我是个白痴,忘了提供简单的解决方案 首先 ,它是使用,否则空的子元素应用在背景的边界:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
jsfiddle.net/dPcDu/2中,您可以为其添加第4个px参数,以@R_877_2419@-shadow
进行传播并更轻松地反映其图像。
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
@R_877_2419@-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>