CSS下情况特性background的应用方式

2021-03-12 16:03 jianzhan

情况色调(background-color)


    CSS能够用单色来做为情况,还可以将情况设定为全透明,background非常于xhtml中的bgcolor。

它的两个值:

  •     transparent(默认设置值,全透明)
  •     color(特定的色调,和文字色调的设定方式同样)


示例:


  body {background-color: black;}

    h1 {background-color: #00ff00;}

    h2 {background-color: transparent;}

    p {background-color: rgb(0,0,255);}


情况照片(background-image)


    用1张照片做为标识的情况能用到这个特性,假如情况色调和情况照片都被界定了,情况照片会遮盖在情况色调之上。

示例:


  body {background-image:url(../images/background.jpg);}

    或

  <body style="background-image:url(../images/background.jpg);">


情况反复特性(background-repeat)


    这个特性务必跟在background-image特性后应用,它决策照片情况的反复方式。假如应用了background-image后沒有加上这个特性,默认设置状况它是横向纵向都反复的,它有4个特性值:

  •     repeat(默认设置值,反复,横向和纵向。)
  •     no-repeat(不反复)
  •     repeat-x(情况照片横向反复)
  •     repeat-y(情况照片纵向反复)


示例:


  body {

    background-image:url(../images/background.jpg);

    background-repeat:repeat-y; /*竖直反复*/

    }


情况部位特性(background-position)


    这个特性也是跟在background-image特性后应用的,它决策情况照片的原始部位,它一般是以x与y座标精准定位的,因此一般都取两个值,默认设置值是0% 0%。

    它依照水平、竖直方法,布署了8个特性值:

  •     水平:left、center、right;
  •     竖直:top、center、bottom;
  •     竖直与水平综合性:x-% y-%、x-pos y-pos。

    前6个特性值都很简易,最终两个特性值乍1看会一些摸不到大脑。x-% y-%的意思是x轴的百分数和y轴的百分数,x-pos y-pos的意思是x轴的值和y轴的赋值。

示例:


  p {

    background-image:url(../images/background.jpg);

    background-position:20px ⑶0px;

    background-repeat:no-repeat;

    }

    div   {

background-image:url(../images/background.jpg);

    background-position:50% 20%;

    background-repeat:no-repeat;

    }


情况附着特性(background-attachment)


    这个特性仍然要追随background-image后边应用,它决策情况照片是追随內容翻转,還是固定不动没动,它有两个特性值:

  •     scroll(默认设置值,情况照片追随內容翻转。)
  •     fixed(情况照片固定不动,不追随內容翻转。)


示例:


.para6   {

background-image:url(../images/background.jpg);

background-position:50% 20% ;

background-repeat:no-repeat;

background-attachment:fixed;

}


情况特性(background)


    和前几篇文章内容中提到的font特性应用方式1样,background也是综合性缩写,撰写次序:


  background:background-color background-image background-repeat background-attachment background-position;


示例:

.para7   {

background:#000000 url(../images/background.jpg);


}

.para8   {

background:url(../images/background.jpg) repeat fixed left top;

}


    在网页页面的具体制做全过程中,还必须留意网页页面的情况色调和情况照片设定的很多细节难题,必须在具体运用中仔细感受和刻苦钻研,之后大家再渐渐地剖析。