douzhang8033 2012-06-20 18:37
浏览 27
已采纳

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

On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.

When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?

On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.

It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.

Does anybody know how I might go about doing this?

P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.

  • 写回答

3条回答 默认 最新

  • drl47263 2012-06-20 18:41
    关注

    Something like:

    CSS:

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

    (the image and the color are those really used, hope they don't sue me for that :) )

    is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥30 自适应 LMS 算法实现 FIR 最佳维纳滤波器matlab方案
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码,可以复制到另一手机上运行
  • ¥15 Python3.5 相关代码写作
  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑,cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决,怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题:提取2个图像的变量作为另外一个图像像元的移动量,计算新的位置创建新的图像并提取第二个图像的变量到新的图像