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

随机推荐

  • 新加坡淡马锡理工学院高考成绩

      今年开始新加坡淡马锡理工学院不再认可国内高考成绩,所以只能通过O水准成绩申请。具体的信息请咨询立思辰留学360顾问老师。新加坡淡马锡理工学院成立于1990年,直属新加坡教育部,是新加坡最广泛的综合

    2022-07-06
    000
  • 美国明尼苏达圣玛丽大学优势

    立思辰留学360介绍,明尼苏达圣玛丽大学(Saint Mary‘ Univerity of Minneota)是一所私立的天主教学校,建于1912年。课程是以学生为中心设计,结合了文学、科学与职业准备

  • 美国南卡罗来纳州立大学怎么样

    建校年代:1896年所在省州:南卡罗莱那州所在城市:Orangeburg学生人数:4327人立思辰留学360介绍,南卡罗莱纳州立大学(也成为SCSU,SC State或简称State),是一所历史悠久

    2022-07-06
    000
  • 目白大学在世界排名怎么样

      目白大学在世界排名怎么样?具体请咨询立思辰留学360日本留学顾问,热线电话:4008-941-360建校时间:1918年学校性质:私立所在地区:东京都新宿学校简介立思辰留学360介绍,目白大学,英

    2022-07-06
    000
  • 诺丁汉特伦特大学申请信息

    据立思辰河北留学360马叶静老师介绍,诺丁汉特伦特大学位于诺丁汉市,由三大校区组成,分别是位于市中心的City Campus, 离市中心30分钟车程的Clifton Campus,和40分钟车程的br

  • 博伟国际教育学院酒店管理课程介绍

      据留学360介绍:博偉于1980年成立了旗下首家教育机构:博偉工商管理学院。经过30年苦心孤诣的经营,博偉国际旅游管理学院(1991年)和博偉语言学校(1997年)相继成立,形成今日博偉学院的硕大

    2022-07-06
    600
  • 新加坡楷博高等教育校区怎么

    新加坡楷博高等教育座落在新加坡的金融和商业中心,拥有乌节路和维尔基路两大校区。乌节路校区以其现代化、智能化的市区校园而出名,舒适的教学环境和备受信赖的品牌,吸引了无数来自世界各地的学生。于2009年4

    2022-07-06
    300
  • 佐贺大学很烂吗

      佐贺大学并不烂,具体请咨询立思辰留学360日本留学顾问,热线电话:4008-941-360建校时间:1920学校性质:国立所属省州:佐贺县所在城市:佐贺市学校简介立思辰留学360介绍,佐贺大学,英

    2022-07-06
    000
  • 2017年伦敦大学皇家霍洛威学院入学要求

    据立思辰浙江留学360江玉霜老师介绍,伦敦大学皇家霍洛威学院创建于1886年,并于1901年成为伦敦大学分校。该学院是伦敦大学的附属多学科学院之一,也是伦敦大学选定专门进行科学教学与研究的五所院校之一

    2022-07-06
    000

发表评论

登录后才能评论

评论列表(0条)

    保存