在Zen Cart1.3.0里,很容易用CSS做到。确切的方法,将取决于是否要创建一个可重复的小图,或将跨越框或拟集中在它里面的图片。(当然也有其他设计的可能性,但我们会在此刻集中这些)。
首先创建图片,并将其放置在模板的图片目录。
然后找到CSS的以下内容:
添加图像到中心框
.centerBoxWrapper {
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
}
添加图像到左侧框或右侧框
.leftBoxContainer,
.rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid
#336633;
margin-top: 1.5em;
}
上述是CSS的经典模板(1.3.7),可以根据你使用的是哪个模板,还有已作出何种修改再做改变。
然后添加以下CSS相应的块
/*
create free space at the bottom of the box in which to display the image */
padding-bottom: 20px;
/*
add the image to the boxes background */
background-image: url(../images/box_bg.jpg);
/*
position the image at the bottom and center of the box */
background-position: bottom center;
/*
EITHER set the image to not repeat */
background-repeat: no-repeat;
/*
OR set it to repeat horizonatally */
background-repeat: repeat-x;
如果你愿意,你可以在中心框和侧边框使用相同的图像。任何多余的宽度将落在框外,并且无法显示。 |