CSS3_盒子背景

盒子背景

盒子背景：content    padding    特殊的 boder 背景

背景绘制 从 padding 开始绘制

• 背景裁剪 background-clip（默认值 border-box）

特殊： 在指定文字背景时 -webkit-background-clip: text;

• 可选值：
  • border-box    默认值，从 padding 左上角开始绘制，border 单独绘制

• • padding-box    不绘制 border，从 padding 左上角开始绘制

• • content-box    不绘制 border，padding，从 content 左上角开始绘制

• 背景原始其实位置 background-origin（默认值 padding-box）
• 可选值：
  • padding-box 默认值，从 padding 左上角开始绘制，border 单独绘制

• • border-box    从 border 左上角开始绘制

• • content-box    从 content 左上角开始绘制

• 与 background-position 的联系： background-origin 指定了 background-position（0，0）起始位置
  • background-origin: padding-box 时，background-position 的（0， 0）点为 padding

• • background-origin: border-box 时，background-position 的（0， 0）点为 border

• • background-origin: content-box 时，background-position 的（0， 0）点为 content

• 设置背景图片的大小 background-size: px / % / cover / contain;
• background-size: px;

  • #box { ???width: 300px; ???height: 300px; ???bakground-image: url(./img/a.jpg); ?????????????????????/* width ?height ????如果只写一个值，第二个值根据宽高比自动计算*/ ???background-size: 100px ?100px;}

• background-size: %;

  • #box { ???width: 300px; ???height: 300px; ???bakground-image: url(./img/a.jpg); ?????/* 参照于盒子自身的 width ?height ????如果只写一个值，第二个值根据宽高比自动计算*/ ???background-size: 100% ?100%;
     ???background-size: 20%;}

• background-size: cover;    将图片以容器最远边进行缩放

  • #box { ???width: 300px; ???height: 200px; ???bakground-image: url(./img/a.jpg); ?????/* 拉伸效果： 根据最远边进行伸缩调节 */ ???background-size: cover;}

• background-size: contain;

  • #box { ???width: 300px; ???height: 200px; ???bakground-image: url(./img/a.jpg); ?????/* 拉伸效果： 根据最近边进行伸缩调节 */ ???background-size: contain;}

CSS3_盒子背景

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9938643.html