CSS背景

    xiaoxiao2025-07-26  11

    CSS背景

    一.背景颜色 background-color

    设置背景颜色:

    background-color: < color name>

    background-color: rgb(xxx, xxx, xxx);

    background-color: #xxxxxx;

    二.背景图片 background-image

    1.设置背景图片

    background-image: url(相对路径)

    2.设置图片的开始位置 background-position

    A.使用top,right,bottom,left,center确定开始位置

    例:background-position: left top;(默认,从左上角开始)

    background-position 可以只给一个值,第二个值默认为center

    B.使用百分比确定位置

    background-position: 0% 0%;(默认,表示左上角开始)

    0% 0%表示左上角,100% 100%表示右下角,第一个值表示水平方向,第二个值表示竖直方向。

     

    C.使用数值确定位置

    background-position: 0px 0px (默认,表示左上角开始)

     

    数值和百分比可以同时使用

    3.图片的大小大于元素的大小

    A.默认情况只会显示图片的左上部分

    B.通过background-position改变显示的部分

    4.图片的大小小于元素的大小

    A.默认会重复平铺图片(水平方向和竖直方向),并且会充满整个背景,即使某些重复的图片会显示不全。

    B.通过background-repeat来确定是否重复平铺或者怎样重复

    background-repeat: repeat 默认值,两个方向平铺 background-repeat: no-repeat 不重复平铺 background-repeat: repeat-x 水平方向平铺 background-repeat: repeat-y 竖直方向平铺

    5.背景图片不随着滚动条而移动(固定在页面某个位置)

    background-attachment: scroll 默认值 background-attachment: fixed 类似于固定定位,固定在页面的某个位置

    三.通过background设置所有样式

    background可以设置所有关于背景的样式,只要将这些样式用空格隔开写在background属性后就可以。

    没有顺序要求,没有数量要求(也就是说,不用全写)没有写的属性会采用默认值

    例子: background-color : #bfa;

    background : url(1.png) center;

    最终,背景颜色是白色的,因为在解析background属性时,没有写背景颜色,默认为白色,所以将#bfa覆盖。

    最新回复(0)