1

在魔兽世界论坛上，他们有一种我想效仿的简洁风格。我不知道该怎么做，所以我决定深入研究他们的样式表并抓取其中的各个部分并将它们放在一起学习如何制作相似的样式。

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

在一个测试网站上，我抓取了他们用于该部分的相同 CSS。他们将其设置为溢出：隐藏；这样它就不会继续放大图像。自然，复制他们的部分代码会让我在测试网站上一团糟。

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

有人知道我该怎么做吗？

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

4

3 回答 3

3

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

示例 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 */
}
于 2012-06-20T18:39:09.227 回答
3

就像是：

CSS： 

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

（图像和颜色是真正使用的，希望他们不要为此起诉我:)）

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

于 2012-06-20T18:41:06.347 回答
1

只需将您使用的背景颜色更改为#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;
}

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

于 2012-06-20T18:49:54.027 回答