CSS 背景

概览

CSS 背景属性用于定义HTML元素的背景。

相关的属性

  • background-color: 设置背景颜色

  • background-image: 设置背景图片

  • background-repeat: 设置背景图片是否重复及如何重复

  • background-position: 设置背景图像的位置

  • background-attachment: 背景图像是否固定或者随着页面的其余部分滚动

  • background: 简写属性,作用是将背景属性设置在一个声明中

元素背景的范围

背景会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

浏览器支持

所有主要浏览器都支持背景属性。

注意: IE7和更早的版本不支持”继承”的值(inherit)。 IE8需要定义!DOCTYPE。 IE9支持”继承”。

背景颜色

background-color 属性用来定义元素的背景颜色。

body {background-color: #b0c4de;}

CSS中,颜色值通常以以下方式定义:

  • 十六进制 – 如:#ff0000

  • RGB – 如:rgb(255,0,0)

  • 颜色名称 – 如:red

  • 默认 – transparent,透明之意。如果一个元素没有指定背景色,那么背景就是透明的。

  • inherit 从父元素继承背景颜色,这个在IE上存在兼容问题。

背景图像

background-image 属性用来定义元素的背景图像。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

body {background-image: url('paper.gif');}

提示:背景颜色和背景图像是可以共存的,请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

body {background-image: url('paper.gif');background-color:#fff;}
    

属性值:

  • none – 默认无背景图像

  • url('image path') – 图像的可访问路径,可以使用网络地址,相对路径地址,绝对路径地址

  • inherit – 从父元素继承

背景重复

如果需要对背景图像平铺,可以使用background-repeat属性。

body {
    background-image: url('gradient2.png');
    background-repeat: repeat-x;
}

属性值:

  • repeat 导致图像在水平垂直方向上都平铺,默认。

  • repeat-xrepeat-y 分别使背景图像只在水平或垂直方向上重复。

  • no-repeat 则不允许图像在任何方向上平铺。

  • inherit 从父元素继承。

背景定位

background-position 属性用来控制背景图片的位置,一般配合 background-repeat: no-repeat; 使用。

body {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    background-position: right top;
}

background-position 属性提供值有很多方法。首先,可以使用一些关键字:topbottomleftrightcenter。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px,最后也可以使用百分数值。

关键词

图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字,一个对应水平方向,另一个对应垂直方向,top rightright top 是等效的。

如果只出现一个关键字,则认为另一个关键字是 center

百分比

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

把一个图像放在水平方向 2/3、垂直方向 1/3 处:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

背景固定

background-attachment 属性设置背景图像是否固定或随页面的其余部分滚动。

body {
    background-image:url('image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

属性值:

  • scroll 默认。背景图像会随着页面其余部分的滚动而移动。

  • fixed 当页面的其余部分滚动时,背景图像不会移动。

  • inherit 从父元素继承。

简写属性

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

    原文作者:Chinaxiang
    原文地址: https://segmentfault.com/a/1190000003787184
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞