css背景设置

提示:点击上方"蓝色字体"↑ 可以订阅噢!

摘要 51RGB官方微信css背景设置,让我们一起学习吧!

background-color:

background-image:[,]*

background-repeat[,]*

=repeat-x | repeat-y |

[repeat | space | round | no-repeat]{1,2}

space:流出空隙,等分空隙,使得边缘相接

round:缩放,填充满元素,使得边缘相接

background-attachment: [,attachment]*

=scroll | fixed | local

background-position[,]*

=[left | center | top | bottom | | ] | [left | center | right | | ] [top | center | bottom | | ] | [center | [left | right] [ | ]?]&&[center | [top | bottom] [ | ]?]

线性渐变 /*参照Photoshop的渐变*/

linear-gradient([[ | to ],]? [,]+

=[left | right ] || [top | bottom]

=[ | ]?)

:表示角度

:表示渐变拉向的方向

径向渐变

radial-gradient(

)

背景图片的坐标

background-origin:[,]*

=border-box | padding-box | content-box

裁剪背景

background-clip:[,]*

值同上

background-origin:content-box;

background-size: [,bg-size]*

=[ | | 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设计自学平台》