4.CSS 背景属性

文章目录

1.背景颜色

background-color 属性设置标签背景颜色。
快捷键：
bc+tab background-color:#fff;

在模仿别的网页的时候，使用取色器，直接去获取颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色属性</title>
  <style>
    div {
      
      
      height: 100px;
    }
    .box1 {
      
      
      background: red;
    }

    .box2 {
      
      
      background: rgb(100, 100, 100);
    }

    .box3 {
      
      
      background: rgba(100,100,100,0.5);
    }
    .box4 {
      
      
      background: #AAAAAA;
    }
    .box5 {
      
      
      background: #666;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>

2.背景图片

background-image:url(""); 属性设置背图片。
url("")中写图片地址，可以是网络/本地的。

注意：
如果图片的大小，没有标签大，那么会自动在水平和垂直方向平铺和填充。
页面中出现了图片，浏览器会再次发送请求获取图片。（开发者工具的Network中查看）

快捷键：
bi+tab background-image:url("");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片属性</title>
  <style>
    div {
      
      
      height: 300px;
      width: 300px;
      background-image:url("image/yy.png");
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

3.背景平铺属性

background-repeat 属性设置图片平铺方式。

值：
repeat;    默认，xy轴平铺。
repeat-x； x轴平铺（水平）。
repeat-y;  y轴平铺（垂直）。
no-repeat; x,y轴都不平铺。

快捷键：
bgr+tab background-repeat:

应用场景：
为网页设置背景图片，图片越大，需要加载的时间越长，
通过平铺来降低图片的大小，提示网页的访问速度（有规律的图片才行。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片平铺属性</title>
  <style>
    div {
      
      
      height: 300px;
      width: 300px;
    }
    .box1 {
      
      
      background-image:url("image/yy.png");
      background-repeat:repeat-x;
    }
  </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

3.1应用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片平铺应用场景</title>
  <style>
    body {
      
      
      background-image: url("image/bg1.jpg");
    }
  </style>
</head>
<body>
</body>
</html>

4.背景定位属性

background-position 属性设置背景图片的位置。

background-position  垂直方向  水平方向;
值：(默认为左上)
1.具体方位单词 
	水平方向：left center right
	垂直方向：top  cneter bottom 
2.具体像素（单元px，为0才能省略单位）
	前一位值，从左往右移动xx px;
	后一位值，从上往徐下移动xx px;
	（值可以是负数，负数值以相反的方向移动）

注意：
同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同事存在，图片会覆盖背景颜色。

快捷键：
bp+tab background-position:0 0;

4.1背景定位属性(值：单词)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位属性(值：单词)</title>
  <style>
    div {
      
      
      height: 300px;
      width: 300px;
      background: #00ff19;
    }
    .box1 {
      
      
      background-image:url("image/kn.jpg");
      background-repeat: no-repeat;
      background-position:top center;


    }
    .box2 {
      
      
        background-image: url("image/ml.jpg");
        background-repeat: no-repeat;
        background-position: bottom right;

    }

  </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.2背景定位属性(值：数值)

图片移动以四边移动，中居中计算，上下移动 区域范围/2-图片大小/2(px)。
图片96*96，div300*300
居中计算：
300/2 + 96/2 = 150-48=102
上下移动102图片正中心居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位属性(值：数值)</title>
  <style>
    div {
      
      
      height: 300px;
      width: 300px;
      background:red;
    }

    .box1 {
      
      
      background-image:url("image/kn.jpg");
      background-repeat:no-repeat;
      background-position: 100px 0;

    }

    .box2 {
      
      
      background-image:url("image/ml.jpg");
      background-repeat:no-repeat;
      background-position:-100px -100px;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.3应用场景

在拖动浏览器窗口时，网页始终将图片中间的重要信息给展示出来。
通常设置为 background-position: center top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位属性(应用场景)</title>
  <style>
    div {
      
      
      height: 1080px;
    }
    .box1 {
      
      
      background-image: url("image/lol.png");
      background-position: center top;
    }
    .box2 {
      
      
      background-image: url("image/csdn.gif");
      background-position: center top;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

5.背景图片关联方式

background-attachment 属性设置背景图片与滚动条之间的关联方式。
背景图片与滚动条之间存在关联，背景图片默认会随着滚动条滚动。
值：
scroll; 滚动，默认，背景图片会随着滚动条滚动。
fixed;  固定，背景图片固定，不会随着滚动条滚动。

快捷键:
ba+tab background-attachment:;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片关联方式</title>
    <style>
        .box1 {
      
      
            background-image: url("image/bg1.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div class="box1">
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>
x <br>     x <br>     x <br>     x <br>

</div>
</body>
</html>

6.背景属性缩写

背景属性缩写格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式；

注意：
background中可以省略任何一个属性值。 

快捷键：
gb+ +tab
background: #fff url() 0 0 no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性缩写</title>
  <style>
    div {
      
      
      width: 300px;
      height: 300px;
    }
    .box1 {
      
      
      background-color: aqua;
      background-image:url("image/yy.png");
      background-repeat: no-repeat;
      background-position: center center;
    }
    .box2 {
      
      
      background:red url("image/yy.png") no-repeat center center;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

7.背景图片与插入图片的区别

div.box$*2+tab   $自动生成数字,*几就生几个标签。
==
<div class="box1"></div>
<div class="box2"></div>

背景图片：仅仅是一个装饰，不会占用位置，有定位属性可以控制图片位置。
插入图片：会占用位置，没有定位属性，控制图片位置难。搜索引擎能收录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片与插入图片的区别</title>
    <style>
        div {
      
      
            height: 300px;
            width: 300px;
            background-color: red;
        }
        .box1
        {
      
      
            background-image: url("image/yy.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>文字</p>
</div>
<br>
<div class="box2">
    <img src="image/yy.png" alt="">
    <p>文字</p>
</div>
</body>
</html>

8.练习

8.1练习1

两个图片重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
  <style>
    div {
      
      

      width: 1285px;
      height: 632px;
    }
    .box1 {
      
      
      background-image: url("image/b1.png");
      
    }
    .box2 {
      
      
      background-image: url("image/b2.png");
      background-repeat: no-repeat;
      background-position: center bottom;
    }

  </style>
</head>
<body>
<div class="box1">
  <div class="box2"></div>
</div>


</body>
</html>

8.2练习2

两个图拼成一个图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习2</title>
  <style>
    div {
      
      
      height: 900px;
      width: 1600px;
    }
    .box1 {
      
      
      background-image: url("image/j1.jpg");
    }
    .box2 {
      
      
      background-image: url("image/j2.jpg");
      background-repeat: no-repeat;
      background-position: 518px 0;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2"></div>
</div>

</body>
</html>

9.CSS精灵图

CSS精灵图是一种图像合成技术。
（每一张图片都发送请求获取图片，将网页的图片合成一张大图，减少请求的次数。图片就增大了。）
作用：减少请求的次数，降低服务器处理压力。
CSS精灵图需要配合背景图片和背景定位来使用。

使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置。

h<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS精灵图</title>
  <style>
    div {
      
      
      height: 114px;
      width: 114px;
      background-image: url("image/jlt.jpg");
    }
    .box1  {
      
      
        background-position: -583px -497px;
    }

    .box2 {
      
      
        background-position: -185px -375px;
    }
  </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

9.1练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图练习</title>
    <style>
        div {
      
      
            width: 140px;
            height: 140px;
            display: inline-block;
            background-image: url("image/jlt2.jpg");
        }
        .box1 {
      
      
            background-position: -1041px -1443px;
        }
        .box2 {
      
      
            background-position:-1445px -1442px
        }
        .box3 {
      
      
            background-position: -1832px -1644px;
        }
        .box4 {
      
      
            background-position: -237px -245px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

文章目录

1.背景颜色

2.背景图片

3.背景平铺属性

3.1应用场景

4.背景定位属性

4.1背景定位属性(值：单词)

4.2背景定位属性(值：数值)

4.3应用场景

5.背景图片关联方式

6.背景属性缩写

7.背景图片与插入图片的区别

8.练习

8.1练习1

8.2练习2

9.CSS精灵图

9.1练习

猜你喜欢