• 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

     

     

  • 相关阅读:
    分段随机实践—模拟线上流量
    基于docker的分布式性能测试框架功能验证(二)
    将博客搬家至CSDN
    考研机试 98.棋盘游戏
    考研机试 100.路径打印
    考研机试 102.计算表达式
    考研机试 97.数字反转
    考研机试 90.简单密码
    考研机试 87.鸡兔同笼
    考研机试 79.浮点数加法
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771579.html
Copyright © 2020-2023  润新知