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

     

     

  • 相关阅读:
    开通第一天,以此随笔作为纪念
    Apache 基于IP访问网站
    命令解释
    vi总结
    RAID
    Windows虚拟机安装
    CentOS虚拟机安装
    通过挂载系统光盘搭建本地yum仓库的方法
    VMware workstation 的安装
    Linux下关于vi命令的详细解说
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771579.html
Copyright © 2011-2022 走看看