HTML – 图像上的盒子阴影？_html-js-css

概述小提琴： http://jsfiddle.net/G5FaQ/ 我有一个包含在div中的图像.紧邻所述图像的div具有框阴影.我希望div的box-shadow与图像重叠,所以看起来图像是它所处的div的一部分,而不是看起来奇怪地悬停在它上面.我试过z-index,正如你在小提琴中看到的那样,但似乎失败了. HTML： <body><nav id="navigation"> <img 小提琴： http://jsfiddle.net/G5FaQ/

我有一个包含在div中的图像.紧邻所述图像的div具有框阴影.我希望div的Box-shadow与图像重叠,所以看起来图像是它所处的div的一部分,而不是看起来奇怪地悬停在它上面.我试过z-index,正如你在小提琴中看到的那样,但似乎失败了.

HTML：

<body><nav ID="navigation">    <img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" wIDth="250px" alt="logo"></nav><div ID="content_wrapper"><!-- InstanceBeginEditable name="content" --><section ID="content">    Content.</section><!-- InstanceEndEditable --></div></div></body>

CSS：

body {    background: #ffd288;    }/*Nav*/#navigation {    wIDth:100%;    z-index: 10;}.logo {    z-index: 1; }/*Content Section*/#content {    background: #393951;    height: 2000px;    z-index: 10;    -webkit-Box-shadow: 0px 0px 20px rgba(0,.8);        -moz-Box-shadow: 0px 0px 20px rgba(0,.8);            Box-shadow: 0px 0px 20px rgba(0,.8);}

解决方法你几乎拥有它！你需要做的就是添加绝对或相对于容器的位置！如果您希望容器像普通的dom元素一样运行,则为相对位置;如果您希望容器自由浮动,则为绝对位置！

position:relative;

http://jsfiddle.net/G5FaQ/1/

祝你好运,如果你有另一个问题,请告诉我:)

总结

以上是内存溢出为你收集整理的HTML – 图像上的盒子阴影？全部内容，希望文章能够帮你解决HTML – 图像上的盒子阴影？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1048563.html

HTML – 图像上的盒子阴影？

发表评论

评论列表（0条）