使用 CSS/HTML 构建背景？答案

【问题标题】：Using CSS/HTML to build background?使用 CSS/HTML 构建背景？
【发布时间】：2012-02-19 14:02:45
【问题描述】：

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

你们打算怎么做呢？

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

【问题讨论】：

您的意思是您希望背景图片覆盖 100% 的页面？那么this 可能会有所帮助；否则你需要解释更多。

标签： html css web html5boilerplate

【解决方案1】：

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

demo

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;
}

【讨论】：

如果真的有必要，请为 IE7+ 使用 PIE css
谢谢，这是一个选项，但我真的很想保持撕纸效果

【解决方案2】：

最常见的方法之一是将图像切成 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 设置固定高度，因为它们没有内容并且实际上不会展开以显示背景图像。

【讨论】：

另外，重复 1 px 会忽略左右两边的撕裂效果。无论如何要显示更多这种效果？
@GavinWynne - 只需从纸的中间部分剪下一大块，然后将其用作背景。但是首先要确保它无缝平铺，否则它看起来会很难看
非常感谢。我可以拿一个更大的 middle_bg 来获得更多的纹理吗？或者这不是用户友好的。
哦，好的，刚看到你的帖子。这是我在做什么不好的做法吗？我应该沿着边境路线走>
这不是一个坏习惯，你不应该有任何问题。您可以以 20px 为例，并相应地重复这些，但在重复纹理的开始和结束之间要小心，以免它们之间出现可见的“断断续续”点。重复纹理背后的原因是为了使图像尺寸尽可能小，但在当今互联网速度的情况下，几千字节之间应该没有太大差异