CSS用图片做背景

  • 语法

    div{
    background:url(图片的位置);/*一定要注意路径*/
    background-repeat:no-repeat;/*设置背景是否重复,默认重复*/
    background-position:center;/*设置图片定位 */
    }
  • 属性:

1.背景重复:

属性repeat导致图像在水平垂直方向上都平铺;repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺。默认地,图像背景将从一个元素的左上角开始。

2.背景定位:

利用background-position属性改变图像在背景中的位置,为其提供值有很多方法。

关键字:

top right bottom right center ;通常关键字成对出现,位置关键字可以按任何顺序出现(因为上下只能为垂直方向,左右只能为水平方向),保证不超过两个字,一个对应水平方向,一个对应垂直方向;若只出现一个关键字,则另一个关键字为center。等价关键字如下: 关键字

百分数值:

这会导致图像适当放置,其中心与其元素的中心对齐,百分数值同时应用于元素和图像 例:background-position:50% 50%;即图像50% 50%的点(中心点)与元素中描述为50% 50%的点(中心点)对齐。 如果只提供一个百分数值,则这个值将做水平值,垂直值就会假设为50%

长度值:

元素内边距左上角的偏移。便宜点是图像的左上角。 例如:background:50px 100px;/图像的左上角将在元素内边距区左上角向右50px、向下100px的位置上/ 注意:与百分值不同,因为偏移只是从一个左上角到另一个左上角,也就是说,图像的左上角与 background-position 声明中的指定的点对齐。

背景关联:

background-attachment:fixed;可防止背景滚动,相对于可视区是固定的; background-attachment:scroll;为默认值,默认滚动。

2019-12-15 03:03:20