HTML – 图像上的盒子阴影?

HTML – 图像上的盒子阴影?,第1张

概述小提琴: 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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存