提示：点击上方"蓝色字体"↑ 可以订阅噢！
摘要 51RGB官方微信css背景设置，让我们一起学习吧！
background-color:<color>
background-image:<bg-image>[,<bg-image>]*
background-repeat：<repeat-sytle>[,<repeat-style>]*
<repeat-style>=repeat-x | repeat-y |
[repeat | space | round | no-repeat]{1,2}
space:流出空隙，等分空隙，使得边缘相接
round:缩放，填充满元素，使得边缘相接
background-attachment:<attachment> [,attachment]*
<attachment>=scroll | fixed | local
background-position：<position>[,<position>]*
<position>=[left | center | top | bottom | <percentage> | <length>] | [left | center | right | <percentage> | <length> ] [top | center | bottom | <percentage> | <length>] | [center | [left | right] [<percentage> | <length>]?]&&[center | [top | bottom] [<percentage> | <length>]?]
线性渐变 /*参照Photoshop的渐变*/
linear-gradient([[<angle> | to <side-or-corner>],]? <color-stop> [,<color-stop>]+
<side-or-corner>=[left | right ] || [top | bottom]
<color -stop >=<color>[<percentage> | <length>]?)
<angle>:表示角度
<side-or-corner>：表示渐变拉向的方向
径向渐变
radial-gradient(
)
背景图片的坐标
background-origin：<box>[,<box>]*
<box>=border-box | padding-box | content-box
裁剪背景
background-clip：<box>[,<box>]*
<box>值同上
background-origin：content-box；
background-size:<bg-size> [,bg-size]*
<bg-size>=[<length> | <pencentage> | auto ]{1,2} | cover | contain
百分比相对于容器
background-size：auto；/*默认值，只有一个值时，另外一个值为auto*/
background-size：20px 20px；/*固定高宽*/
background-size：50% 50%；/*高宽都是容器的50%*/
background-size：cover；/*图片尽量小，最小高宽不能小于容器，让图片撑满容器*/
background-size：50% 50%；/*图片尽量大，但是高宽不能超过容器，背景图以最大形完全显示在容器中*/
复合属性：
想认识志同道合的朋友一起学习web
加入我们的学习QQ群 19066743
丰富的学习资源，周一到周四免费直播公开课
长按图片，识别二维码即可入群
你可能感兴趣的精彩内容
微信：UI设计自学平台加关注
长按关注：《UI设计自学平台》