CSS背景

发表于 分类于 阅读次数： 本文字数： 138 阅读时长 ≈ 1 分钟

设置纯色背景

1
2
3
4
5
<style type="text/css">
    body {
        background-color:gray;
    }
</style>

设置图片背景

如果同时设置纯色背景和图片背景，则纯色背景在图片背景之下。并且图片背景会平铺整个屏幕。

  • background-repeat属性可以设置平铺方式，repeat-x、repeat-y、no-repeat。
  • background-position属性可以设置图片背景的位置。top、bottom等。
  • background-attachment属性可以设置图片是否随文档滚动。fixed、scroll。
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="text/css">
        body {
            background-image:url(http://cn.bing.com/sa/simg/CN_Logo_Gray.png);
            background-repeat:no-repeat;
            background-position:center;
            background-attachment:fixed;
        }
    </style>