首页 > 像这种网站背景如何设置的 一整张图片?还是怎么设计的?求个详解

像这种网站背景如何设置的 一整张图片?还是怎么设计的?求个详解

像这种网站背景如何设置的 一整张图片?还是怎么设计的?求个详解
灰色的背景
http://jsfz.nankai.edu.cn/s/52/t/29/main.htm


首先说一下答案正如 @Integ 所说,是repeat实现的。如果是一个可以用repeat实现的背景用repeat-x,repeat-y,repeat也无可厚非。然后我想说一下如果是一张大图不可重复背景实现的两个方法:

  1. 使用img标签将背景图片载入,设置该图片CSS属性(可参考我之前写的网页红心电台):

      img.background {
         position:absolute;
         top:0;
         left:0;
         width: 100%;
         height: 100%;
         z-index:-999;
     }
    
  2. 设置背景图片后,设置该DOM的CSS属性(前提该图片足够大):

    body {
        background: url('http://abc.com/background.jpg') no-repeat;
        background-size:cover;
    }
    

body {
    background: url(/page/main29/images/bg.jpg) repeat-x top;
}

确实是一张图(2px * 1008px),x轴循环,好LOW。


审查元素自己看下。。

【热门文章】
【热门文章】