1

我制作了一张图片以更容易地解释我之后的内容：

图片说明 http://bayimg.com/image/eabahaaci.jpg

我已经阅读了有关该主题的其他一些问题，但我不确定这些解决方案是否适合我，因为我的 div 需要可扩展并随着更多内容的添加而增长。

有谁知道如何以简单的方式完成此任务？

4

2 回答 2

2 
#body {background: transparent url(background/image.png) 0 0 repeat-y;
}

#content-wrap {width: 60%;
               margin: 0 auto;
               background: transparent url(partially/transparent/60percent-opaque.png) 0 0 repeat;

}

#main-content {width: 90%;
               margin: 1em auto 0 auto;
               background-color: #fff;
}

#footer       {width: 90%;
               margin: 1em auto 0 auto;
               background-color: #fff;
}

这会将部分透明的.png图像设置为该#content-wrap部分的背景，并为 div 设置纯色背景（我使用过#main-content和#footer，但它们具有相同的样式，因此您可以使用#content-wrap div并稍微缩短 css。

<div id="content-wrap">
<!-- this is the outer wrapping div -->

<div id="main-content">

<!-- this I'm assuming is the main content portion -->

</div>

<div id="footer">

<!-- the name explains my assumption, I think... -->

</div>

</div>


body {
  background: #fff url(http://i.stack.imgur.com/9uIxu.png) 0 0 repeat;
}
#content-wrap {
  width: 60%;
  margin: 1em auto;
  padding: 1em 0;
  background-color: rgba(0, 0, 0, 0.3);
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
}
#content-wrap div {
  width: 90%;
  margin: 1em auto;
  background-color: #fff;
}
#content-wrap div p {
  margin: 1em 0;
}
<div id="content-wrap">

  <div id="main-content">

    <p>I presume the main content will sit here...</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim.</p>

    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
      vulputate eleifend tellus.</p>

    <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi.</p>

    <p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
      Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit
      cursus nunc,</p>

  </div>

  <div id="footer">

    <p>This'd be the footer. And so on...</p>

  </div>

</div>

...如果您知道您的观众将使用 FF3.x（可能还有基于 webkit 的浏览器），您可以使用background-color: rgba(0,0,0, 0.6);定义背景颜色（红色=0、绿色=0、蓝色=0、alpha=0.4 或 40 % 不透明（或 60% 透明）-介于0（完全透明）和1（完全不透明）之间的值。）

使用rgbafor color 可以防止问题opacity用于使父 div 透明，同时尝试使子 div 可见。但是由于浏览器的采用，它的使用受到了限制，当然......

我的站点上的工作演示结束了：http://www.davidrhysthomas.co.uk/so/transparent.html

于 2009-06-23T23:33:38.603 回答
0

您将需要一个 1px 高的图像切片用于透明，一个用于底部的圆形线

.background{
    background:url(/image/path);
}
.wrapper{
    background:url(/image/path/trans.png) repeat-y; 
    width:500px; 
    position:relative;
 }
.wrapper .bottom{
     background:url(path/to/image) no-repeat; 
     position:absolute; 
     bottom:0; 
     left:0; 
     height:20px;
}

.inner{
    background:#fff; 
    margin:10px;
}

我已经完成了宽度和边距。你应该自己穿上合适的尺码

于 2009-06-23T23:30:30.543 回答