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

     

     

  • 相关阅读:
    6.12白书第五章图论总结——司雨寒
    【司雨寒】最短路专题总结
    十三 十四周总结
    13周总结--苏康
    JuneX_13
    12总结--苏康
    十二周总结
    每周总结(5.30)——何贤拓
    进阶实验4-3.1 家谱处理 (30分)
    进阶实验2-3.1 海盗分赃 (25分)--递推
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771579.html
Copyright © 2011-2022 走看看