CSS background 背景

background属性为元素添加背景效果。

它是以下属性的简写,按顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以下所有示例中的花花.jpg图片的大小是48×48


1 background-color

background-color指定元素的背景色。




    
    
    CSS 背景色 Demo
    


    
"container">
"box">

CSS background 背景_第1张图片


2 background-image

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景图片 Demotitle>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .bg {
            width: 96px;
            height: 96px;
            background-image: url('./花花.png')
        }
    style>
head>

<body>
    <div class="bg">div>
body>

html>

CSS background 背景_第2张图片

背景图片默认是重复的(repeat)。


3 background-repeat

它具有以下值。

1)默认值repeat

repeat会裁剪重复图片超出的部分。

.bg{
    width: 120px;
    height: 96px;
    background-repeat:repeat;
}

CSS background 背景_第3张图片

2)space

space是无裁剪的重复。

其重复原理:

  • 如果图片不能刚好放下,剩余长或宽将均匀分布在图片之间。
  • 第一张图片一定从左上方的顶点位置开始排列。
  • 如果图片大小超出容器大小,那么将被裁剪。
.bg{
    width: 120px;
    height: 96px;
    background-repeat:space;
}

CSS background 背景_第4张图片

.bg{
    width: 160px;
    height: 96px;
    background-repeat:space;
}

CSS background 背景_第5张图片

3)round

round是自适应重复,相比较于space,它会根据元素与图片的大小关系拉伸或缩小图片。

比如说,一个图片长为 x x x,元素长为 X X X n x ≤ X ≤ m x nx \leq X \leq mx nxXmx,如果 X X X更靠近 n x nx nx,那么图片将被放大,如果 X X X更靠近 m x mx mx,那么图片将被缩小。

4)no-repeat

no-repeat设置图片不允许重复。


4 background-attachment

background-attachment决定图片的滚动行为。

其值包括:

scroll(默认值):背景图片随页面滚动而滚动。

CSS background 背景_第6张图片

fixed:背景图片不会随页面滚动而滚动,而是相对于视口的原点(左上角)固定。

CSS background 背景_第7张图片

我们观察到这两个元素的背景图片是重叠在一起了。

local:不随页面滚动,但随元素内部滚动而滚动。

CSS background 背景_第8张图片

5 background-position

background-position用于设定图片的位置,其值类型如下:

.bg{
    /*关键字*/
    background-position:top;
    background-position:bottom;
    background-position:center;
    background-position:left;
    background-position:right;
    
    /*百分比值*/
    background-position:50% 50%;
    
    /*长度值*/
    background-position:10cm 10cm;
    
    /*边界偏移值*/
    background-position:top 10em left 10px;
    
    /*全局值*/
    background-position:inherit; /*继承父元素*/
    background-position:initial; /*设置为初始值,默认*/
    background-position:revert; /*重置为样式表中的值*/
    background-position:unset; /*重置为初始值,如果父元素背景位置有定义,继承父元素的值*/
}

你可能感兴趣的:(CSS,css,前端)