Question

我有一个使用两个不同图像的渐变投影。每边一个。如何将OutsideContainer设置为相对于Center的大小？因此，当中心内容扩展OutsideContainer扩展时。

这样我的Gradients就会在整个内容区域显示。

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

Answer 1

更好地完成您要做的事情的方法是给left宽度的外框添加填充，right删除左右div并使用背景图像双方都设置为您设置的外部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执行此操作的唯一方法。

CSS - 如何设置渐变阴影？

1 个答案: