zoukankan      html  css  js  c++  java
  • 在css中设置图片的背景图,怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类: 
    1.是一整张大图,尺寸和区域大小刚好吻合
    2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。
    css3出现以后,可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox,chrome,以及ie9上都可以使用。
    具体使用方法如下:
    背景图尺寸(数值表示方式):
    #background-size{ background-size:200px 100px; }
    背景图尺寸(百分比表示方式):
    #background-size{ background-size:30% 60%; }
    背景图尺寸(等比扩展图片来填满元素,即cover值):
    #background-size{background-size:cover; }
    背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
    #background-size{ background-size:contain; }
    背景图尺寸(以图片自身大小来填充元素,即auto值):
    #background-size{ background-size:auto; }
  • 相关阅读:
    OkHttp的使用
    Adapter的实现
    RxJava的学习与实现
    Blueprint的实现
    The second group meeting!
    读书笔记1
    The First Team Meeting!
    java----使用NIO进行快速的文件拷贝
    java——类的学习(2)
    java——类的学习(1)
  • 原文地址:https://www.cnblogs.com/xzzzys/p/7403181.html
Copyright © 2011-2022 走看看