Question

我有一个iPad作为背景图片

但是我希望它能够扩展，希望页眉，页脚的一部分，然后中间部分扩展到页面的长度。

寻找任何建议来获得这种效果，不确定现在使用哪种技术。

亲切的问候，

Answer 1

您可以定位背景然后堆叠元素，在下面的示例中 - 您可以在1000px块中继续添加任意数量的div元素。也就是说 - 你最好为中间部分创建一个新图像，然后它将垂直重复，这意味着它可以是任何高度。

或者 - 为什么不制作＆＃39;屏幕＆＃39;部分可滚动？

Demo Fiddle

HTML

<header></header>
<div></div>
<div></div>
<footer></footer>

CSS

div, header, footer {
    background-image:url(http://www.propertyitguy.co.uk/img/tablet-bg.png);
    background-repeat:no-repeat;
}
header, footer {
    height:100px;
}
footer {
    background-position:0 -1400px;
}
div {
    background-position:0 -200px;
    height:1000px;
}

Answer 2

当您不想切片时使用border-image。这是一个例子：

http://jsfiddle.net/FsFLm/

.ipad {
    border-style: solid;
    border-width: 143px 55px 144px;
    -moz-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    -webkit-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    -o-border-image: url(http://www.exampe.com/image.jpg) 143 55 144 repeat;
    border-image: url(http://www.exampe.com/image.jpg) 143 55 144 fill repeat;
    /*just for the demo*/
    height: 2000px;
}

因为我很懒，代码是由http://border-image.com

生成的

可扩展的背景图像

2 个答案:

Demo Fiddle