투명하고 확장 가능한 래퍼 디브, 어떻게?

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 divs에 대한 단색 배경을 가진 섹션 (나는 사용했습니다. #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 부모를 투명하게 만들기 위해, 아이들을 보이게하려고 노력합니다. 그러나 브라우저 채택으로 인해 사용이 제한되어 있습니다.

내 사이트에서 작동하는 데모가 끝났습니다. http://www.davidrhysthomas.co.uk/so/transparent.html

Answer 2

Transperncy의 경우 1px 높이의 이미지 슬라이스와 바닥의 둥근 코더를위한 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;
}

나는 너비와 여백을 만들었습니다. 당신은 올바른 크기를 직접 넣어야합니다