css,用一张大图做页面背景,同时在背景图片大概在水平方向中部抠出一个小矩形,这个矩形是用来做链接

html-css014

css,用一张大图做页面背景,同时在背景图片大概在水平方向中部抠出一个小矩形,这个矩形是用来做链接,第1张

背景图片居中,如果你指的是body的背景,那么背景图片的css为center就行了。然后再看你的小矩形的位置,假设你的页面只有这么一个元素,那么直接设定这个小矩形的宽度,然后css为margin:0 auto如果上边还有边距,你可以自己调整数值。如果页面除了小矩形还有其他的元素,具体情况具体分析,要看你的具体布局啦。其实这个背景图片和这个小矩形不会相互影响的吧。

有很多方法,你说的方法布局层次很不清晰,不推荐使用,我见过的:

1. 把一个圆切成四等份,每一份用相对定位放在盒子的四个角上,盒子用border属性,见过我的一个朋友这样写。(宽度和高度都能自适应)

2.把盒子的上下两个边(包括弧线)切下来,按照正常的文档流放在头和尾,中间用border-left和border-right 。(宽度不能自适应)

3.滑动门的做法,左上圆角切下来,保持一个足够长的宽度,右上角只要把弧线切下来就可以,这也是现在淘宝首页的做法,代码如下:

<b class="h">

<b></b>

</b>

第一个b表签放长条的背景,第二个b放右上圆角,只要float:right叠在长条上就能形成上边的两个圆角,同理,下边两个圆角也是这么做,中间当然用border-left和border-right (宽度和高度都能自适应)

你可以用css3的多层背景,把4个圆角图片放到上下左右四个地方,缺点是低版本ie不鸟。

或者嵌套四层div,div宽高都设为一样,每个div上放一个圆角背景:

<div>

<div>

<div>

<div></div>

</div>

</div>

</div>