根据帖子大小'Stretching'图像

Question

在魔兽世界论坛上，他们设置了一种整洁的风格，我想效仿。 我不知道该怎么做，所以我决定挖掘他们的样式表，抓住其中的各个部分，把它们放在一起，学习如何使风格相似。

在挖掘样式表时，我发现了这张图片。 如您所见，这是他们论坛帖子的背景，但大小是固定的。 这是我的问题 - 如果用户的帖子比图片长得多，他们如何动态创建更多长度？

在一个测试网站上，我抓住了他们用于该部分的相同CSS。 他们将其设置为溢出：隐藏;这样它就不会不断增加图像。 当然，复制他们的部分代码会让我在测试网站上一团糟。

它适用于较小的帖子，因为他们只需要将其切断，但我假设他们可能有一个非常薄（设置宽度，可能是 1 像素高）.jpg图像，它们根据论坛帖子的大小而倍增。

有人知道我该怎么做吗？

附言 当然，我不会使用他们的图像等 - 我现在只是为了了解如何制作自己的图像。

Answer 1

像这样：

.CSS：

.post 
 {
   background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat; 
 } 

（图片和颜色是真正用过的，希望他们不要起诉我:)）

是你要找的。背景图像位于顶部并保持在那里，而容器高度的其余部分具有与图像淡入的背景颜色相同的背景颜色（使用渐变）。所以这只是一个拉伸图像的错觉，但实际上只是你看不到图像结束的中断。

Answer 2

看起来帖子的背景颜色与该图像最底部的颜色相同。这样它就会"淡入"——图像实际上并没有改变大小。

示例 CSS 将是：

#yourPostSelector {
  background-image: url('path/to/image.jpg');
  background-position: top left; /* or 'top center' - whatever works for you */
  background-attachment: scroll;
  background-color: #000000; /* pick the bottom color of your background image */
}

Answer 3

只需更改您使用的背景颜色是#00000*

它应该更改为您使用的背景图像的颜色，基本上是底部，以便完美融合。目前，根据您现在的图像，代码将是这样的：-

.body {
    background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
    clear: both;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    width: 990px;
}

更新这个类并检查结果，如果你不明白，这里的评论会让你明白。