黑马程序员技术交流社区

标题: 【成都校区】--- background系列属性 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-10-10 19:13
标题: 【成都校区】--- background系列属性
background系列属性

• background是一个简写属性，其属性值可以包括
• backgrund-color
• background-image
• background-position/background-size
• background-size
• background-origin
• background-attachment
  

background属性学习

• background-color
• 用于表示元素的背景颜色，取值可以是十六进制色号也可以是rgba，或者是hsl。
• background-image
• 用于表示元素的背景图片，与上述的background-color互不冲突，取值为图片所在路径。
• background-position
• 用于表示背景图片的位置，它的取值有两项：x与y，x表示距离左侧边界的长度，y表示距离顶部边界的长度。
  

取值举例

值	描述
x(px）y(px)	第一个值代表水平，第二个值代表垂直。单位可以是例子中的像素px，也可以是别的一些常见的css单位，比如em。而当只取一个值的时候，那么第一个值就是所取值，第二个值默认为50%
x% y%	两个值的含义同上，当图片位置在左上角的时候就是0% 0%，当为右下角时就是100% 100%，同样，如果只设置了一个值，那么就默认第二个值为50%
left top, left bottom, left center, right top, right bottom, right center, center top, center bottom, center bottom	仅指定一个关键字，其他值将会是"center"

• background-size
  

用于表示背景图片的大小，取值可以为百分比/数字/contain/cover。
其他两项取值都很好理解，对于contain和cover做了演示和学习，如下。
当取值为contain的时候

image.png
很明显，contain指的是，在适应元素大小的情况下，将整个图片全部显示出来
当取值为cover的时候

image.png
cover则是在保持原来图片纵横比的情况下，将整个元素覆盖，不留空隙。（所以明显图片没有被拉扯失真）

• background-origin
  

用于表示图片在元素中所处的位置，取值可以为padding-box/border-box/content/box
取值为content-box的时候

image.png
取值为padding-box的时候

image.png
取值为border-box的时候

以上是在border为透明的时候作出的尝试，如果border有自己的颜色比如下图，就会出现背景图片边缘被遮盖的情况，虽然这个时候看起来不像是图片已经覆盖到border的样子，但它实际上已经在border上了，只是因为border原本层级高于背景，所以会被遮挡。

• background-attachment
  

用于表示背景图片是否随着元素的上下滚动而滚动，取值有fixed/scroll/inherit。
scroll

fixed

且上述操作都是在图片可重复的情况下进行的，如果图片不可重复就会出现在取值scroll的时候图片会因为滚动而消失在视野里，而fixed则不会，尤其在有文本对照的时候最为明显。

[CSS] 纯文本查看 复制代码

html,body {

   width: 100%;

   height: 100%;

   margin: 0;

   background: #000;

}

.color-con {

   width: 50%;

   height: 50%;

   margin: 20px;

   padding: 20px;

   /*background: url("./imgs/img01.jpg");*/

   background-color: #666;

   background-image: url('./imgs/img01.jpg');

   background-size: 50% auto;

   background-position: 50% 50%;

   background-origin: content-box;

   background-clip: content-box;

   background-repeat: no-repeat;

}

效果图

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2