CSS background-image属性

  • 定义和用法

    background-image属性为元素设置一个或多个背景图像。默认情况下,背景图像放置在元素的左上角,并垂直和水平重复。
    提示:元素的背景是元素的总大小,包括填充和边框(但不是边距)。
    提示:如果图像不可用,请始终设置要使用的background-color
    特征 说明
    默认值 none
    继承 没有
    动画 没有。CSS动画参考
    CSS版本 CSS1 + CSS3 新值
    JavaScript语法 object.style.backgroundImage="url(img_tree.gif)"尝试一下
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性名称
    background-image
    4.0
    1.0
    1.0
    1.0
    3.5
    注意:IE8及更早版本不支持多个背景图像。
  • CSS语法

    background-image: url|none|initial|inherit;
  • 实例

    为<body>元素设置两个背景图像:
    body {
     background-image: url("img_tree.gif"), url("paper.gif");
     background-color: #cccccc;
    }
    尝试一下
  • 属性值

    属性值 描述
    url('URL') 图像的URL。 要指定多个图像,请使用逗号分隔URL
    none 不会显示背景图像。 这是默认的
    linear-gradient() 将线性渐变设置为背景图像。 定义至少两种颜色(从上到下)
    radial-gradient() 将径向渐变设置为背景图像。 定义至少两种颜色(中心到边缘)
    repeating-linear-gradient() 重复线性渐变
    repeating-radial-gradient() 重复径向渐变
    initial 将此属性设置为其默认值。查看initial关键字
    inherit 从其父元素继承此属性。查看inherit关键字
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS背景
    CSS教程:CSS背景(高级)
    CSS教程:CSS网格(grid)