我正在为网站制作模板，但我遇到了一些非常基本的 CSS 问题。
基本上，我尝试使用 div 元素将网站分成几个部分，我希望每个部分都包含一个半透明的黑色背景，周围有一个完全透明的边框。
想法是有一个背景图像，并且会有新闻元素被分割成实际上彼此不接触或重叠的黑色 block (也就是说，它们周围有边距)。黑色 block 略微透明，它们之间的区域(大小为几个像素)没有内容，您只能看到背景。
目前我的情况如下:
网站:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mainPage.css" />
<title>Some site</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="images/SomeImage.bmp" alt="ImageName"/>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft1 </p>
</div>
</div>
<div class="randomBlockRight">
<h1> Heading test</h1>
<p> randomBlockRight </p>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft2 </p>
</div>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft3 </p>
</div>
</div>
<div class="menuStrip">
<p> menuStrip </p>
</div>
<div class="sectionedNews">
<p> sectionedNews </p>
</div>
<div class="disclaimer">
<p> disclaimer </p>
</div>
</div>
</body>
相关CSS代码:
html, body {padding: 0px; margin: 0px; height: 100%;}
body
{
background-color:white;
font-size:100%;
background-image:url('images/Famicom cartridges.jpg');
background-attachment:fixed;
}
h1
{
background-color:transparent;
color:#8B0000;
}
/* Link style */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* Classes */
.container
{
background-color:beige;
width: 1020px;
margin: 0 auto;
}
.transDiv
{
position:relative;
float:left;
color:white;
width:100%;
height:100%;
background-color: black;
opacity: 0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
.header
{
height: 120px;
width: 100%;
background-color: black;
margin: 0 auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.latestBlockLeft
{
/* padding-top:3px;
padding-right:3px; */
height: 170px;
width: 70%;
/* background-color: yellow;*/
float: left;
}
.randomBlockRight ........... and so on
如果我尝试使用边距，一直会发生的情况是边距绕过 div 分区并将我的其他元素推到页面上的所有位置。我可以为每个元素使用精确的像素大小来做到这一点，但我想能够说一个 div block 占据了我的主容器 div 宽度的 70%，并且 Xpix 是空的，可以看到该框内的边距。我不希望我的透明背景出现在这些地方。如何做到这一点？我什至完全采用了正确的设计方法吗？
谢谢!
最佳答案
<div id="parent"><div id="child"></div></div>
1)父div必须有“position: absolute”或“position: relative”。然后你可以这样做:
#parent {
display: block;
position: relative;
}
#child {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: -10px; // HERE IS THE TRICK!
left: 0;
}
使用此解决方案，父级的大小将设置子级的大小!
如果你想让 child 相对于 parent 有一个相对高度，你可以像这里一样给他高度:等参数。
关于CSS:使子div元素的高度和宽度小于父元素的X像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8129043/