CSS内容补充之background
一、概述 |
之前我们一直用的是background-color,但是一直没有研究过backgroup的其他的属性,今天我们来研究一下背景图片,已经固定一个大图标下的某个小图标,在这个经常在我们的网站中使用,下面我们就来搞一下吧。
二、背景图片 |
2.1、默认背景图片
说明:用backgroud-image: url('图片地址')来添加背景图片,默认div多大,则图片重复访问
<body> <div style="background-image: url('static/abc.jpg');height: 220px;"></div> </body>
问:我如果高度设置大一点呐?
2.2、背景图片不重复
说明:设置背景图片,但是我不想重复,使用方法:backgroup-repeat: no-repeat。
<body> <div style="background-image: url('static/abc.jpg');height: 440px; background-repeat: no-repeat"></div> #no-repeat设置背景图片不重复 </body>
2.3、背景图片水平重复
说明:设置背景图片,但是我只想水平重复,使用方法:backgroup-repeat: repeat-x。
<body> <div style="background-image: url('static/abc.jpg');height: 440px; background-repeat: repeat-x"></div> #repeat-x 水平重复 </body>
2.4、背景图片垂直重复
说明:设置背景图片,但是我只想垂直重复,使用方法:backgroup-repeat: repeat-y。
<body> <div style="background-image: url('static/abc.jpg');height: 440px; background-repeat: repeat-y"></div> #repeat-y垂直背景图片重复 </body>
三、固定块级标签中图片的位置 |
比如说一个div中的一个图片中N多的图标,但是我只想在有限的div中显示某个图标,那咋办呐?如何移动这些图标呢?
<body> <div style="background-image: url('static/icon_18_118.png');height: 200px; background-repeat: no-repeat;border: 1px solid red;"></div> </body>
效果图:
这样,我们设置一下div的宽度和高度,使它只显示一个图标:
<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这个属性
3.1、水平移动背景图片
说明:backgroup-postion-x,正数表示向左移动,负数表示向右移动
<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>
3.2、垂直方向移动
说明:backgroup-postion-y,正数表示向下移动,负数表示向上移动
<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.3、用backgroup-postion直接表示
说明:backgroup-postion:0 0,表示x,y的坐标的值
<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坐标改成负数,就可以把下面的图标移上来:
四、总结 |
- backgroud-image: url('图片地址');默认,根据div的大小。背景图片水平和垂直重复访问
- backgroud-repeat: no-repeat:背景图片不重复,repeat-x:背景图片水平重复,repeat-y:背景图片垂直重复
- backgroud-position-x:水平移动背景图片,backgroud-position-y:垂直移动背景图片,backgroud-position:x y。
- backgroud: red url('图片地址') -105px -212px no-repeat。分别指的是backgroup: 背景色 背景图片 背景图片x位置坐标 背景图片y位置坐标 重复度