A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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;
}

效果图







0 个回复

您需要登录后才可以回帖 登录 | 加入黑马