css - 透明可扩展的包装div，怎么样？

Question

我做了一张图片来更容易地解释我想要的东西:

Image Illustration http://bayimg.com/image/eabahaaci.jpg

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

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

Answer 1

#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(完全不透明)。)

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

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