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

Question

我制作了一张图片来更容易地解释我的追求：

图片插图 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(https://i.sstatic.net/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透明的问题。 但当然，由于浏览器的采用，它的使用受到限制......

我的网站上的工作演示已经结束： http://www.davidrhysthomas.co.uk/so/transparent.html" rel="nofollow noreferrer">http:// /www.davidrhysthomas.co.uk/so/transparent.html

Answer 2

您将需要一个 1 像素高的图像切片来实现透明度
一个用于底部的圆形绳索，

.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;
}

我已将宽度和边距调高。 您应该自己输入正确的尺寸