WEB前端

css背景设置 透明 背景图片等

位置:首页 > WEB前端 > css教程,2018-08-11 08:52
css背景设置,让我们一起学习吧!background-color:<color>background-image:<bg-image>

css背景设置,让我们一起学习吧!

background-color:<color>

css背景(图0)

background-image:<bg-image>[,<bg-image>]*

css背景(图0)

background-repeat:<repeat-sytle>[,<repeat-style>]*

<repeat-style>=repeat-x | repeat-y |

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

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

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

css背景(图0)

background-attachment:<attachment> [,attachment]*

<attachment>=scroll | fixed | local

css背景(图1)

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>]?]

css背景(图2)

线性渐变 /*参照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>:表示渐变拉向的方向

css背景(图3)

径向渐变

radial-gradient(

)

背景图片的坐标

background-origin:<box>[,<box>]*

<box>=border-box | padding-box | content-box

裁剪背景

background-clip:<box>[,<box>]*

<box>值同上

background-origin:content-box;

css背景(图4)

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%;/*图片尽量大,但是高宽不能超过容器,背景图以最大形完全显示在容器中*/

复合属性:

css背景(图5)


TAGS:css背景

猜你喜欢

NewHot