根据文章大小'拉伸'图像

在World of Warcraft forums上，他们有一个整洁的样式，我想效仿。我不知道该怎么做，所以我决定挖掘他们的样式表，抓住它们的部分，并把它们放在一起，学习如何使样式类似。根据文章大小'拉伸'图像

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

在测试网站上，我抓住了他们用于该部分的相同CSS。他们设置了溢出：隐藏;所以它不会保持图像的倍增。自然，复制部分代码让我在test website上混乱不堪。

它适用于较小的帖子，因为他们只是要切断它，但我假设他们可能有一个非常薄（设置宽度，可能是1像素的高度）.jpg图像，它们正在成倍增长，具体取决于论坛帖子的大小。

有没有人知道我会怎么做呢？

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

来源

2012-06-20 Isaac Askew

喜欢的东西：

CSS：

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

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

是你在找什么对。背景图片位于顶部并停留在此处，而容器的其余高度与图片淡入的背景颜色相同（使用渐变）。所以它只是一个扩张的图象的假象，但实际上是只是你没有看到中断在图像结束

来源

2012-06-20 18:41:06

哦''''是非常棘手的 – Adi

不错！谢谢！ –

@AdnanShammout是的，这让我疯狂。你是否偶然知道是否有一些lang：css选项在这些情况下添加以告诉markdown如何表现？ –

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

范例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-20 18:39:09 anjunatl

是的，这就是我所看到的 – Adi

在这种情况下，是的 - 但是如果我想要放在图片的顶部和底部周围呢？（自定义边框，不生成） –

当你说“图片”时，是指背景图像还是整个帖子本身（包含顶部的背景图像和通过该区域其余部分的颜色）？ – anjunatl

只要改变你的背景颜色，你用的是＃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-20 18:49:54 Subhajit

根据文章大小'拉伸'图像

回答

相关问题