background的属性和背景图片定位的实例

本文内容：

　　1.背景图片定位示例

　　2.background常用的属性值

　　3.background-repeat新增的round、space属性

　　4.background-size的属性值（着重介绍contain、cover）

　　5.background-origin属性值（borde-box、padding-box、content-box）

　　6.多背景图片示例

---

 

 背景图片定位（background-position）原理

A. 语法：Background-position:水平位置 垂直位置

B. 水平位置/垂直位置设置方法：

1） 数值（px）正负值都可以，正数值表示向右移动或向下移动，负数值表示向左或向上移动；

2） 百分比（%）范围：0%—100%

3） 关键词：水平位置：left(左) center(中) right(右)

垂直位置：top(上) center(中) bottom(下)

默认情况下，background-position的原点位于左上角，换句话说，元素的左上角和图片的左上角是对齐的，随后图片向各个方向重复，都是以左上角为起点。

注意：当只设置一个值时：代表水平位置，垂直位置默认居中

1. <style>
2. input[type="button"]{
3. width:100px;
4. height:56px;
5. border-radius:10px;
6. }
7. .btn1{
8. background-image: url("allbgs2.png");
9. background-position:21px355px;
10. /*第一，第二属性值表示以图片左上角（left top）位置为原点的坐标（21px,355px），即向右移动21px，向下移动355px*/
11. }
12. .btn2{
13. background-repeat:no-repeat;
14. background-image: url("allbgs2.png");
15. background-position:21px-175px;
16. /*（21px,-225px）,即向右移动21px，向上移动-175px*/
17. }
18. img{
19. width:100px;. height:200 px;
20. }
21. img:hover{
22. height:auto;
23. width:auto;
24. }
25. </style>
27. <form>
28. <inputtype="button"class="btn1">
29. <inputtype="button"class="btn2">
30. <br/>
31. <imgsrc="allbgs2.png">
32. <small>原背景图</small>
33. </form>

效果图

---

 

CSS常用背景属性

background-color  背景颜色；

background-image  背景图片

background-repeat  背景图片重复方式

background-position  背景图片位置

background-size  背景大小

background-attachment  背景图片滚动控制

background-clip:conten-box ||  padding-box || border-box 规定背景的绘制区域,注意提前设置好padding数值，这样能够效果更加明显。

background-origin  背景的定位“原点”

 

背景属性的缩写  backgroud：green url（“image/background.jpg”） top left

 

CSS3中为background-repeat提供了两个额外值，round、space。

测试代码

1. <style>
2. figcaption{
3. font-size:25px;
4. }
5. div.div1{
6. background-color: aliceblue;
7. width:50px;
8. height:100px;
9. background: url(".idea/pdf_icon.gif");
10. border: solid 1px royalblue;
11. background-repeat: space;
12. /*space 尽可能地重复图片以占满背景，不行时则加大图片的边距*/
13. }
14. div.div2{
15. background-color: aliceblue;
16. width:50px;
17. height:100px;
18. background: url(".idea/pdf_icon.gif");
19. border: solid 1px royalblue;
20. background-repeat: round;
21. /*round 尽可能地重复图片以占满背景，不行时则拉伸图片*/
22. }
23. </style>
24. <figure>
25. <figcaption>
26. origin
27. </figcaption>
28. <imgsrc=".idea/pdf_icon.gif">
29. </figure>
30. <h3>background-repeat属性值space</h3>
31. <divclass="div1"></div>
32. <hrcolor="darkgray"/>
33. <h3>background-repeat属性值round</h3>
34. <divclass="div2"></div>

背景尺寸设置1

background-size:50%;

background-size:100px 50px;

测试代码

1. <style>
2. div.div1{
3. width:120px;
4. height:50px;
5. background:url("Desert.jpg")no-repeat;
6. background-size:50%;
7. /*将背景图像缩放成父级元素的50%，主要是背景图片的width是父级元素width的一半*/
8. border:1px solid #00408f;
9. }
10. div.div2{
11. width:100px;
12. height:50px;
13. background: url("Desert.jpg");
14. background-size:100px50px;
15. /*将背景图像设置成宽度为100px,高度为50px*/
16. border:2px solid #00408f;
17. box-shadow:12px10px5px gray;
18. }
19. </style>
20. <divclass="div1"></div>
21. <divclass="div2"></div>
22. <br/>
23. <imgsrc="Desert.jpg">

效果图

背景尺寸设置2

background-size:cover

拉大图片，使背景图片完全填满父级容器，并保持宽高比例

background-size:contain

缩放图片，使背景图片恰好适合背景区，保持宽高比例

指定设定background-origin属性，可以指定背景图片原点位置。

（参考盒子模型）

background-origin:border-box,默认值，以边框左上角为原点；

background-origin:padding-box,去掉padding之后为原点；

background-origin:content-box,以内容区域为原点；

示例

联想：背景裁剪

backgroun-clip控制背景绘制区域，比如可以让背景色和背景图片只出现在内容区域(content-box)，而不出现内边框区域(padding-content)。默认情况下，背景绘制区是扩展到边框外边距的（margain）。

background-clip的属性值border-box，padding-box，content-box的用法与backgroun-origin类似

示例

1. <styletype="text/css">
2. body {
3. margin:0;
4. padding:0;
5. font:100%Georgia,"Times New Roman",Times, serif;
6. background:#3c6b92;
7. }
8. #wrapper {
9. margin:0auto;
10. width:960px;
11. height:400px;
12. background:#fff;
13. padding:50px00200px;
14. }
15. #wrapper div {
16. float: left;
17. margin-right:50px;
18. background:#e1d8b9;
19. padding:25px;
20. }
21. #wrapper #one {
22. width:150px;
23. height:150px;
24. border:10px solid rgba(212,178,220,.8);
25. background:#e1d8b9 url(star_icon_large.png) no-repeat;
26. /*因为背景图片是透明的，所以设置了背景颜色*/
27. /*在此试验各种值，比如border-box*/
29. background-clip: content-box;
30. /*background-clip: padding-box;
31. background-clip: border-box;*/
32. }
34. </style>
35. </head>
37. <body>
38. <divid="wrapper">
39. <divid="one">
40. </div><span>content-box</span>
41. </div>
42. </body>

复合背景色

多背景示例

 

来自为知笔记(Wiz)