欢迎光临
我会一直在努力

CSS中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>
  26. <form>
  27. <inputtype="button"class="btn1">
  28. <inputtype="button"class="btn2">
  29. <br/>
  30. <imgsrc="allbgs2.png">
  31. <small>原背景图</small>
  32. </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*/
  28. background-clip: content-box;
  29. /*background-clip: padding-box;
  30. background-clip: border-box;*/
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <divid="wrapper">
  36. <divid="one">
  37. </div><span>content-box</span>
  38. </div>
  39. </body>

复合背景色

多背景示例

 

赞(3) 打赏
未经允许不得转载:前端范 » CSS中background的属性和背景图片定位的实例
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏