zoukankan      html  css  js  c++  java
  • css3之背景属性之background-size

    一、相关属性:

    background-image: url(“./img/a.jpg”); //设置元素背景图片

    background-repeat: repeat/no-repeat; //设置背景图像的平铺方式 默认repeat

    background-position:left top; //设置元素的背景定位起点,默认值为left top

    background-size:auto; //设置背景图像的尺寸大小,默认值auto

    background-attachment:scroll; //设置元素背景图片是否为固定,默认值为auto

    background-clip:border-box; //控制元素的背景图像显示区域大小,默认值为border-box

    background-origin:padding-box; //控制元素的背景图像position的默认起始点,默认值为padding-box

    background-color:#abcdef; //设置背景颜色

    二、例子:

    1.初始效果:

     

    初始样式效果:图片按照原始大小进行展示

     

    2.添加background-size:

    1)cover效果

     

    效果:按照背景最长边进行按比例放大或缩小

     

    2)contain效果

     

    效果:图片按照背景最短边进行按比例放大或缩小

     

    3)宽高百分比

     

    效果:宽度和高度按照百分比进行填充

     

    2.添加background-position

    background-positon的属性值可以为left top

     

    设置背景图片中心的位置

     

    添加background-origin

     

     

     

     

    添加background-clip

     

     

  • 相关阅读:
    agc015D A or...or B Problem
    agc016E Poor Turkeys
    CTSC2016时空旅行
    假期的宿舍[ZJOI2009]
    上白泽慧音(luogu P1726
    小K的农场(luogu P1993
    Cashier Employment(poj1275
    Intervals(poj1201
    序列分割[Apio2014]
    特别行动队[APIO2010]
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771579.html
Copyright © 2011-2022 走看看