您可以使用
box-shadow,可能是:
#something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-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; box-shadow: inset 0 0 10px #0f0;}<div id="something"></div>
div,但是当然会模糊(正如您希望从
box-shadow属性中看到的那样)。要建立
density阴影的阴影,您当然可以添加其他阴影:
#something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-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; box-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参数,以
box-shadow进行传播并更轻松地反映其图像。
#something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);}<div id="something"></div>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)