CSS笔记06-背景

背景色

可以使用background-color来设置元素的背景颜色

p {
    background: gray;
}

如果希望背景色从元素的文本向外延伸，可使用padding增加一些内边距

p {
    background: gray;
    padding: 20px;
}

background-color是不会被继承的，其默认值是transparent，透明的意思。如果一个元素没有指定背景颜色，那么背景就是透明的，这样才会显示其更高节点元素的背景才能可见。

所有的背景属性都不会被继承

 

背景图像

想要把背景图像放入背景，需要使用background-image属性，其默认值是None，表示背景没有放任何图片

如果想要设置一个背景图像，必须为这个属性设置一个url

body{
    background-image: url("../image/bj.jpg");
}

 

 

背景重复

上面的CSS设置之后，你会发现整个屏幕都会重复展示这张图片，通过background-repeat可以设置背景水平重复，垂直重复，不重复，继承父节点相关设置。默认水平垂直重复。

body{
    background-image: url("../image/bj.jpg");
    background-repeat: no-repeat;
}

上面的设置图片会只显示一次

 

背景定位

可以使用background-position属性改变图像在背景中的位置，为该属性提供值得的有很多选项首先可以使用关键字。还可以使用长度值如100px，最后也可以使用百分数值。不同类型的值对于背景图像的位置有所差异。

不管哪种方式都需要两个参数，第一个是水平位置，也就是从左到右。第二个是垂直位置，也就是从上到下。

关键字

top、bottom、left、right、center

关键字一个对应水平方向，一个对应垂直方向。如果只出现一个关键字，那么另外一个默认为center。不能超过两个关键字

body{
    background-image: url("../image/bj.jpg");
    background-repeat: no-repeat;
    background-position:top center;
}

百分比

百分比设置会同时应用于元素和图像，图像中50% 50%的点会和元素中50% 50%的点对齐

body{
    background-image: url("../image/bj.jpg");
    background-repeat: no-repeat;
    background-position:50% 50%;
}

如果只提供一个百分数值，这个值就作为水平值，垂直值将假设为50%

backgroud-position默认为0% 0%，在功能上相当于top left。也就是说背景图像是从元素内边距区的左上角开始平铺

长度值

长度是默认从元素的左上角开始偏移的。

body{
    background-image: url("../image/bj.jpg");
    background-repeat: no-repeat;
    background-position:50px 20px;
}

第一个参数表示水平位置，所以50px的意思就是从元素的左上角开始，向右边偏移50px

第二个参数表示垂直位置，所以20px的意思就是从元素的左上角开始，向下边偏移20px

 

 

背景关联

使用background-attachment属性可以设置，往下浏览web页面时，滚动条已经超高了这个图片。这个图片是否还会一直显示。

body{
    background-image: url("../image/bj.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景图片会随文档滚动而消失的。使用fixed可以设置图像可视区是固定的（可以理解为excel中的固定表头，类似一些网站的图片广告，鼠标怎么滚动，都会固定显示在那一块）。