比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在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-size2{

  background-size:30% 60%;

  }背景图尺寸(等比扩展图片来填满元素,即cover值):

  #background-size3{

  background-size:cover;

  }背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):

  #background-size4{

  background-size:contain;

  }背景图尺寸(以图片自身大小来填充元素,即auto值):

  #background-size5{

  background-size:auto;

  }

css 样式 图片平铺整个界面的更多相关文章

  1. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  2. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  3. Duilib技巧:背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  4. android实现图片平铺效果&WebView多点触控实现缩放

    1.图片平铺效果实现非常简单,只要在xml中添加一个 android:tileMode的属性就可以了.首先在drawable文件夹中添加自己的my.xml文件.代码: Java代码 <?xml ...

  5. Bootstrap-全局CSS样式-图片样式

    Bootstrap第二部分:全局CSS样式-图片样式.img-rounded   圆角图片.img-circle    圆形图片.img-thumbnail 缩略图片.img-responsive响应 ...

  6. CSS背景横向平铺BUG,解决方法

    给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...

  7. Canvas 图片平铺设置

    /** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...

  8. [UWP]通过自定义XamlCompositionBrushBase实现图片平铺

    1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

  9. LODOP中设置设置图片平铺水印,超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

随机推荐

  1. 微信时代,"邮"你选择 腾讯企业邮箱推新玩法

    近日,腾讯企业邮箱在广州.北京.南京三地举办<微信时代,“邮”你选择>企业邮箱新方向客户见面会,同时也正式宣布将打通微信.“拥抱”移动办公,领航国内办公工具移动之“变”. 据了解,腾讯企业 ...

  2. Java中的final修饰符

    1.什么时候可以选择final修饰符 如果想让一个类不被其他类继承,不允许在有子类,这时候就要考虑用到final来修饰. 2.用final修饰的类 首先大家要明白,用final修饰的类是不能被继承的, ...

  3. PHP学习之一晚撸下W3chscool

    PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...

  4. 二叉树建立,先序、中序、后序遍历(c实现)

    建立树ABC##DE#G##F###,输出 #include <stdio.h> #include <stdlib.h> #define ElemType char //节点声 ...

  5. 二级域名session 共享方案

    二级域名session 共享方案   1.利用COOKIE存放session_id(); 实例: 域名一文件php代码: <?php session_start(); setcookie(&qu ...

  6. 解决php configure: error: Cannot find ldap libraries in /usr/lib.错误

    解决php configure: error: Cannot find ldap libraries in /usr/lib.错误 iitshare 分类:Linux,PHP,项目实施 | 标签:Ca ...

  7. 【Other】千字文 硬笔 楷书 字帖

    <千字文>是我国最优秀的一篇训蒙教材,用一千个汉字勾划出一部完整的中国文化史的基本轮廓,代表了中国传统教育启蒙阶段的最高水平.<千字文>通篇首尾连贯,音韵谐美,读起来朗朗上口, ...

  8. Office 2010启动时出现无法验证此应用程序的许可证的解决

    Office 2010启动之后弹出一个窗口提示:Microsoft Office无法验证此应用程序的许可证.修复尝试失败或者已被用户取消.应用程序将立即关闭. 遇到这样的情况,原因是Office的系统 ...

  9. 10件在PHP 7中不要做的事情

    刚刚在园子里看到一篇特别好的文章,就拿到我的园子里分享了. 1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是 ...

  10. php请求URL中的参数有空格

    url=http://www.123.com/abc.php?name=ku xiong ku xiong之间有一个空格,需要替换成%20或者+ url=http://www.123.com/abc. ...