Question

我想为容器盒写一些css / html，我可以把它放在我的网站上各个地方（即 - 在网站的侧边栏上绘制日历等模块）。

我有5张图片：div的左，右，顶部，底部和背景。

顶部图像高37像素，底部图像高22像素。

我最好指定一个div高度/宽度，然后让它在顶部/底部/右侧/左侧绘制div图像，自动调整为div的比例并且不相互重叠。我会假设您想对非重叠位使用绝对定位，但我完全不确定如何调整图像大小并坚持每一方。

这是我现在拥有的（非常简单的）代码：

#top {background: url(container_top.png) no-repeat;}
#container {background: url(container_left.png) no-repeat;}
#right {background: url(container_right.png) no-repeat;}
#bottom {background: url(container_bottom.png) no-repeat;}

<div id="top">
   <div id="container">
       Content post
   </div>
   <div id="right"></div>
   <div id="bottom"></div>
</div>

唯一需要注意的是，我只希望顶部/底部图像水平缩放（不要在y轴上调整大小），左/右图像垂直缩放（不要在x轴上调整大小）孔）。

供参考，我的图片名称为： “container_.png”

Answer 1

有几个选择。第一个是创建四个角落div和四个侧面div，使用每个角落的角落图像和侧面的可重复图像。您还可以使用一种“推拉门”技术。如果你是一个勇敢的人，请使用css3 border-images（checkout http://w3schools.com/cssref/css3_pr_border-image.asp）

选项一：

<div class="box">
    <div class="top">
       <div class="top-left"></div>
       <div class="top-right"></div>
    </div>

    <div class="content">
        <div class="left"></div>
        <div class="content">Lorem ipsum dolor sit amet</div>
        <div class="right"></div>
    </div>

    <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
    </div>
</div>

.top { background: url('repeatable.png') repeat-x; }
.top-left { background: url('top-left.png') no-repeat; }
.content .left { background: url('repeatable') repeat-y; }
....

用于推拉门技术，结帐http://www.google.com/?q=google+css+sliding+doors

使<div>容器具有图像边框</div>

1 个答案: