CSS - 그래디언트 그림자를 설정하려면 어떻게해야합니까?

두 개의 다른 이미지를 사용하는 그래디언트 그림자가 있습니다. 각면에 하나씩. 내 OutsideContainer의 크기를 Center에 상대적으로 설정하려면 어떻게해야합니까? 따라서 센터 콘텐츠가 확장되면 OutsideContainer이 펼쳐집니다.CSS - 그래디언트 그림자를 설정하려면 어떻게해야합니까?

이렇게하면 내 그라디언트가 전체 콘텐츠 영역에 표시됩니다.

.Left 
{ 
    background-image:url(themes/Light/images/BorderLeft.gif); 
    background-repeat:repeat-y; 

    float:left; 
    background-color:#FF0000;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:745px; 
} 
.Right 
{ 
    background-image:url(themes/Light/images/BorderRight.gif); 
    background-repeat:repeat-y; 
    float:left; 
    background-color:#00FF00;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.OutsideContainer 
{ 
    margin:0 auto; 
    width:761px; 
    height:200px; 
} 

<body> 
<div class="OutsideContainer"> 
    <div class="Left"></div> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
    <div class="Right"></div> 
</div> 
</body>

출처

2011-08-11 P.Brian.Mackey

당신이하려고하는 일을하는 더 좋은 방법으로 설정 양쪽의 배경 이미지를 왼쪽과 오른쪽 된 div를 제거 left 및 right의 폭의 외부 상자에 패딩을주고 사용하는 것입니다 귀하의 설정 외부 div 너비는 실제 div가는 투명 배경으로. 이 같은 :

enter image description here

그리고 CSS 지금과 같습니다

.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:771px; 
} 
.OutsideContainer 
{ 
    padding: 0px 8px 0px 8px; 
    background: url('picture.png') repeat-y; 
    margin:0 auto; 
    width:761px; 
    overflow: hidden; 
}

HTML :

<body> 
<div class="OutsideContainer"> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
</div> 
</body>

이 CSS를 사용하여이 작업을 수행 할 수있는 유일한 방법이 될 수 있습니다.

출처

2011-08-11 20:50:54 Nayish

너비를 줄이면 OutsideContainer가 만든 가운데 맞춤을 잃어 버린다. 높이 대신 최소 높이를 지정하면 '왼쪽'과 '오른쪽'을 잃게됩니다. 나는 오버플로를 추가했다. 나는 여전히 결과를 얻을 수 없다. 고정 폭, 동적 높이를 원합니다. –

죄송합니다. 너비가 역동적이라고 생각했는데 대답을 편집했지만 왼쪽과 오른쪽 div의 높이를 높이로 설정하지 않으면 문제가 생길 수도 있습니다. 그렇지 않으면 귀하의 사업부는 거기에있는 사업부와 일치하도록 설정된 div에 의해 그들에게 주어진 높이에 의존하고 있으며, 이는 전체 브라우저 크기의 사업부가됩니다. – Nayish

부모로부터 계산 된 고정 높이가 이미 있습니다. 'OutsideContainer'. 높이를 '왼쪽'과 '오른쪽'으로 움직이는 것이 어떻게되는지는 알 수 없습니다. 이게 단순히 불가능하다고 말하려고합니까? –

CSS - 그래디언트 그림자를 설정하려면 어떻게해야합니까?

답변

관련 문제