• 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

     

     

  • 相关阅读:
    获取当前3Ds MAX版本
    获取贴图及IES文件
    有关默认相机转VR相机
    c++_成员函数回调
    c++_获取系统安装字体
    文件替换子字符串
    随机数
    冒泡排序,前面几个没有排序
    vc_CONTAINING_RECORD使用
    可用软件产品密钥
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771579.html
Copyright © 2020-2023  润新知