day15-CSS之background

一、引子

　　之前我们一直用的是background-color，但是一直没有研究过backgroup的其他的属性，今天我们来研究一下背景图片，已经固定一个大图标下的某个小图标，在这个经常在我们的网站中使用，下面我们就来搞一下吧

二、背景图片

2.1、默认背景图片

说明：用backgroud-image: url('图片地址')来添加背景图片，默认div多大，则图片重复访问

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="height: 100px">
 9     </div>
10         <!--background-image 背景图片
11                                     repeat -x,y 是否填充，可以竖着填充，
12                                     横着填充
13                                     postion-x,y,移动图片，
14                                     使得智能通过div 框看到特定的图片。-->
15     <div style="background-image: url(zan.png);height: 200px;width: 200px;
16             /*background-repeat: no-repeat ;*/
17             /*background-position-x:10px;*/
18             /*background-position-y: 10px;*/
19             /*border: 1px red solid;*/
20             "></div>
21 </body>
22 </html>

 

效果如下：  默认是 横、竖都填充，直到填满位置，x ，代表横向，y:代表竖，

三、固定块级标签中图片的位置

比如说一个div中的一个图片中N多的图标，但是我只想在有限的div中显示某个图标，那咋办呐？如何移动这些图标呢？

1
2
3
4
<body>
    <div style="background-image: url('static/icon_18_118.png');height: 200px;
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

 效果图：

这样，我们设置一下div的宽度和高度，使它只显示一个图标：

1
2
3
4
5
<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;  #只设置适当高度和宽度只显示一个小图标
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

 效果图：

但是我想div里面的图片，如果我使用margin或者padding的话，我只移动div本身，根本改变不了div内部的效果，所以我们使用backgroup-postion这个属性

1、水平移动背景图片

说明：backgroup-postion-x，正数表示向左移动，负数表示向右移动

1
2
3
4
5
<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position-x: 20px; #向左水平方向移动背景图片
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

2、垂直方向移动

说明：backgroup-postion-y，正数表示向下移动，负数表示向上移动

1
2
3
4
5
<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position-y: 20px; #向下移动20px
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

3、用backgroup-postion直接表示

说明：backgroup-postion：0 0，表示x，y的坐标的值

1
2
3
4
5
<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position: 20px  20px; #向下和向左各移动20px
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

根据上面的图的情况，我们其实x坐标不需要移动，只需要把y坐标改成负数，就可以把下面的图标移上来：

四、总结

  1. backgroud-image: url('图片地址')；默认，根据div的大小。背景图片水平和垂直重复访问
  2. backgroud-repeat: no-repeat:背景图片不重复，repeat-x:背景图片水平重复，repeat-y:背景图片垂直重复
  3. backgroud-position-x:水平移动背景图片，backgroud-position-y:垂直移动背景图片，backgroud-position:x y。
  4. backgroud: red  url('图片地址')  -105px  -212px  no-repeat。分别指的是backgroup:  背景色    背景图片   背景图片x位置坐标    背景图片y位置坐标   重复度
posted @ 2018-05-21 10:32  东郭仔  阅读(110)  评论(0)    收藏  举报