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

【问题标题】：'Stretching' an image depending on post size根据帖子大小“拉伸”图像
【发布时间】：2012-06-20 18:37:38
【问题描述】：

在World of Warcraft forums 上，他们有一个我想效仿的简洁风格。我不知道该怎么做，所以我决定深入研究他们的样式表并抓取其中的各个部分并将它们组合在一起，以学习如何制作相似的样式。

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

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

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

有人知道我该怎么做吗？

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

【问题讨论】：

标签： php html css forums

【解决方案1】：

类似：

CSS：

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

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

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

【讨论】：

@AdnanShammout 是的，这让我抓狂。您是否偶然知道在这些情况下是否添加了一些 lang:css 选项来告诉降价如何表现？
@DamienPirsy，您可以在代码块前添加。我帮你修好了

【解决方案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 */
}

【讨论】：

在这种情况下，是的 - 但是如果我想在图片的顶部和底部设置边框怎么办？（自定义边框，未生成。）
当您说“图片”时，您是指背景图像还是整个帖子本身（包含顶部的背景图像和整个区域的颜色）？
忽略这一点 - 即使按照我的想法（在 Photoshop 中为顶部和底部设计精美的边框），您的答案仍然适用。我想多了！谢谢！
您可以使用 CSS3 使用 border-image 属性 - w3schools.com/css3/css3_borders.asp 将图像用作边框。不过，它还不完全兼容大多数浏览器 - caniuse.com/#feat=border-image
嘿，有趣。有趣的是，缺少一些空格会破坏 SO 的语法突出显示。感谢您的编辑，阿德南。

【解决方案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;
}

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

【讨论】：