zoukankan      html  css  js  c++  java
  • AppCanCSS背景图片的属性

    最近在用AppCan框架技术做跨平台移动应用开发,碰到界面布局设计中图片平铺、拉伸效果。

    我们用到的是CSS 3中Background-size属性。

    网上查了下这个属性,小记下:

     取值: background-size: auto || length || percentage || cover || contain

     取值说明:

     1、auto:此值为默认值,保持背景图片的原始高度和宽度;

     2、length:此值设置具体的值,可以改变背景图片的大小;

     3、percentage:此值为百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分    值将使背景图片大小根据所在元素的宽度的百分比来计算。

     4、cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又无法使用   background-repeat来实现时,我们就可以采用cover;将背景图片放大到适合容器的大小,但   这种方法会使用背景图片失真;

    5、contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器。

    这个主要运用在,当背景图片大于元素容器时,而又需要将背景图片全部显示出来,此时我们就可 以使用contain将 图片缩小到适合容器大小为止,这种方法同样会使用图片失真。

    当background-size取值可以设置两个值,也可以设置一个值。

    当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高 度,而会与第一个值相同。

  • 相关阅读:
    Thread中的join使用
    java.lang.NoClassDefFoundError: Ljavax/enterprise/inject/spi/BeanManager;
    org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm
    maven 中使用jstl 错误解决
    eclipse 安装maven
    前端 JS事件操作
    前端 JS
    前端 固定位置 与绝对定位
    前端 显示与隐藏
    前端 盒子阴影
  • 原文地址:https://www.cnblogs.com/minghualiyan/p/4663457.html
Copyright © 2011-2022 走看看