html - 使用 CSS/HTML 构建背景？

Question

伙计们，我一直在尝试很多不同的选择，从切割到构建 html/css。似乎没有什么真正起作用:(

你们会怎么做呢？

链接：- http://www.flickr.com/photos/gavinwynne/6902590869/

Answer 1

最常见的方法之一是将图像切成 3 块，如下图所示：

首先显示第 1 部分，然后使第 2 部分高度等于 1px 并通过 CSS 在 y 轴上重复它，然后将第 3 部分放在底部以“关闭”容器

您的 html 可能采用以下形式：

<div class="div_top"></div>

<div class="div_middle"> your content here </div>

<div class="div_bottom"></div>

更新

Css 将与此类似：

 .div_top { 
      background-image:url('top_bg.jpg');
      background-repeat:no-repeat;
      width:800px;
  }

 .div_middle { 
      background-image:url('middle_bg.jpg');
      background-repeat:repeat-y;
      width:800px;
  }

 .div_bottom { 
      background-image:url('bottom_bg.jpg');
      background-repeat:no-repeat; 
      width:800px;
  }

您可能希望为顶部和底部 div 设置固定高度，因为它们没有内容并且实际上不会展开以显示背景图像。

Answer 2

最简单的方法是使用粗边框和插入框阴影。不过，浏览器支持有些有限。它基本上归结为 IE9+ 和现代浏览器 ( ref )。

演示

body {
    min-height: 300px;
    border: 24px solid #666;
    box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    padding: 35px;
}