Question

在World of Warcraft forums他们有一个整洁的风格设置，我想模仿。我不知道该怎么做，所以我决定挖掘他们的样式表并抓住它们并将它们放在一起以学习如何制作类似的样式。

在挖掘样式表时，我找到了this图片。正如你所看到的，它是论坛帖子的背景，但它是一个固定的大小。 这是我的问题 - 如果用户的帖子比图片长得多，它们如何动态创建更长的长度？

在测试网站上，我抓住了他们用于该部分的相同CSS。他们把它设置为溢出：隐藏;这样它就不会使图像倍增。当然，复制部分代码会让我感到困惑test website。

它适用于较小的帖子，因为它们只需要将其剪掉，但我假设它们可能有一个非常薄（设置宽度，可能是1个像素的高度）.jpg图像，它们是相乘的，具体取决于论坛帖子的大小。

有人知道我该怎么做吗？

P.S。当然，我不打算使用他们的图像等 - 我现在只是复制它只是为了了解如何制作我自己的图像。

Answer 1

它的背景颜色看起来与该图像最底部的颜色相同。这样它就会“淡化” - 图像实际上并没有改变尺寸。

示例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 2

类似的东西：

CSS：

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

（图像和颜色是那些真正使用的，希望他们不会因此而起诉我:)）

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

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

更新此课程并检查结果，如果您不理解这里的评论会让您理解。

根据帖子大小“拉伸”图像

3 个答案: