父元素的背景色无法覆盖子元素的背景色,怎么办?

zjleon2008 2012-03-26 08:20:27
我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得?
fixed必须用absolute,shadow放到fixed里是为了根据fixed的高宽自动变化



#fixed {

	background-color:red;

	width:100px;

	height:100px;

	top:50px;

	right:20px;

	display:block;

	position:absolute;

	z-index:5;

}

	#fixed .shadow{

		position:absolute;

		top:2px;

		left:2px;

		display:block;

		width:101%;

		height:101%;

		background-color:#555;

		z-index:4;

	}





<div id="fixed">

	<ul>

		<li>asfasfsd</li>

	</ul>

         <div class="shadow"></div>

</div>

...全文
1187 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
我自是年少-韶华倾负 2012-03-29
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

怎么模拟阴影？有阴影就需要光源，如果整个网页多处用到阴影，那么光源就应该一致，这样才看上去比较真实。
如果光源在左上45度，那么阴影就应该在右边和下边，但为了真实还应该同时模拟亮边。而且真实的阴影还和被照面的背景色有关（光的衍射）。
用HTML，CSS技术的语言来说，就是用两个DIV（一个嵌套在另一个中），经过精心设计两个DIV的边框颜色和内层DIV的背景颜色，就可以模拟出相当真实的阴影。
……
[/Quote]
本来还想来 献丑 的 看到这么经典的 就没得说了。这个 很强大。
zhoulina251314 2012-03-29
  • 打赏
  • 举报
 回复
给你一个自动延伸背景效果的参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0px auto; padding:0px; font:12px/24px Arial, Helvetica, sans-serif; color:#333;}
a,a:hover{font-size:12px; line-height:24px; color:#333; text-decoration:none;}
a:hover{text-decoration:underline;}
.testDiv{width:400px; margin:20px; float:left; display:inline; position:relative;}
.testDiv_main{width:360px; float:left; display:inline; background:#F00; color:#FFF; padding:10px 20px; position:relative; z-index:2;}
.testDiv_shadow{ position:absolute; left:3px; top:3px; background:#CCC; width:400px; z-index:1;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".testDiv_shadow").height($(".testDiv").height()) ;
})
</script>
</head>

<body>
<div class="testDiv">
<div class="testDiv_main">我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得</div>
<div class="testDiv_shadow"></div>
</div>
</div>

</body>
</html>
wzhiyuan 2012-03-27
  • 打赏
  • 举报
 回复
怎么模拟阴影？有阴影就需要光源，如果整个网页多处用到阴影，那么光源就应该一致，这样才看上去比较真实。
如果光源在左上45度，那么阴影就应该在右边和下边，但为了真实还应该同时模拟亮边。而且真实的阴影还和被照面的背景色有关（光的衍射）。
用HTML，CSS技术的语言来说，就是用两个DIV（一个嵌套在另一个中），经过精心设计两个DIV的边框颜色和内层DIV的背景颜色，就可以模拟出相当真实的阴影。

我这里给出一个WINDOWS 2003警告对话框的例子。
<div style="position:absolute;left:50%;top:300px;border-top:1px solid #d6d3ce;border-left:1px solid #d6d3ce;border-right:1px solid #424142;border-bottom:1px solid #424142;" >

<div style="background-color:#d6d3ce;width:300px;height:200px;border-top:1px solid #ffffff;border-left:1px solid #ffffff;border-right:1px solid #848284;border-bottom:1px solid #848284;" >

some text 

</div>

</div>


我爱小土豆 2012-03-27
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#fixed {

    background-color:#555;

    width:100px;

    height:100px;

    top:50px;

    right:20px;

    display:block;

    position:absolute;

    z-index:5;

}

    #fixed .shadow{

        position:absolute;

        top:2px;

        left:2px;

        display:block;

        width:101%;

        height:101%;

        background-color:red;

        z-index:4;

    }

</style>

</head>



<body>

<div id="fixed">

    <ul>

        <li>asfasfsd</li>

    </ul>

         <div class="shadow"></div>

</div>



</body>

</html>
missgd152 2012-03-27
  • 打赏
  • 举报
 回复
<style type="text/css">
#fixed {
background-color:red;
width:100px;
height:100px;
top:50px;
right:20px;
display:block;
position:absolute;
z-index:5;
}
#fixed .shadow{
position:absolute;
top:2px;
left:2px;
display:block;
width:101%;
height:97%;
background-color:#555;
z-index:4;
}
</style>
ycproc 2012-03-26
  • 打赏
  • 举报
 回复
可以使用 jquery 的一些 效果来增强
Acesidonu 2012-03-26
  • 打赏
  • 举报
 回复 


#fixed {

    width:100px;

    height:100px;

    top:50px;

    right:20px;

    position:absolute;

}

    #fixed .shadow{

        position:absolute;

        top:2px;

        left:2px;

        width:101%;

        height:101%;

        background-color:#555;

        z-index:-1;

    }

#fixed ul {

	list-style: none;

	margin: 0px;

	padding: 0px;

    top:50px;

    right:20px;

	width: 100%;

	height: 100%;

	background-color: red;

}
background-postion定位与图片结合实现圆角效果
background-postion 背景默认铺设位置的起点为：元素的左上角。 ——————————————————————————– background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。 background-image 也不能继承。事实上，所有背景属性都不能继承。–也就说，子元素的背景图案会覆盖父元素的背景图案。 ——————————————————————————– 您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景
CSS解决子元素撑开父元素，父元素背景色无法铺满全屏问题
CSS解决子元素撑开父元素，父元素背景色无法铺满全屏文题 上干货！！！ 假设父元素撑开整个页面背景色为蓝色，子元素背景色为粉色，高度撑开了父元素，出现滚动条，此时父元素背景色无法铺满，会出现白边 出现的问题请看代码和图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text
css布局之flex布局
css布局之flex布局，快速掌握flex弹性伸缩布局的妙用。主要讲解如何在父容器上添加flex-direction、justyfi-content、align-items、align-content等控制样式的属性；以及如何在子元素上添加order、flex-grow、flex、align-self等样式属性。
html 父容器的背景消失了,为什么父元素设置了背景色后部分子元素被覆盖不可见...
如题，父元素一设置背景色就会覆盖了子元素，只有子元素设置z-index时才能显示，我想知道这是什么原因导致的，代码如下：Document* {margin: 0;padding: 0;}html,body {width: 100%;height: auto;font-family: 'Microsoft YaHei','微软雅黑',"Microsoft JhengHei",'华文细黑','STHe...
css父元素背景覆盖其子元素背景
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 ...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章