背景图尺寸(数值表示方式):

  1. #background-size{
  2. background-size:200px 100px;
  3. }

  背景图尺寸(百分比表示方式):

  1. #background-size2{
  2. background-size:30% 60%;
  3. }

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

  1. #background-size3{
  2. background-size:cover;
  3. }

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

  1. #background-size4{
  2. background-size:contain;
  3. }

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

  1. #background-size5{
  2. background-size:auto;
  3. }

css 图片平铺的更多相关文章

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

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

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

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

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

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

  4. Canvas 图片平铺设置

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

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

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

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

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

  7. iOS UIButton 设置图片平铺

    UIImage *image2 = [UIImage imageNamed:imgName]; CGFloat top = ; // 顶端盖高度 CGFloat bottom = ; // 底端盖高度 ...

  8. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  9. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

随机推荐

  1. 提升 DevOps 效率,试试 ChatOps 吧!

    本文翻译自文章 To Boost DevOps, Try ChatOps,文中用简单易懂的方式介绍了 ChatOps 的发展和价值,由 OneAPM 工程师编译整理. 当我们谈论 DevOps 时,总 ...

  2. Party

    hdu3062:http://acm.hdu.edu.cn/showproblem.php?pid=3062 题意:中文题. 题解:很明显的2-sat.然后要深刻理解命题和逆否命题.如这一题,c1,c ...

  3. c++ 名字粉碎(name mangling)

    转自Ibm: Name mangling is the encoding of function and variable names into unique names so that linker ...

  4. error: /lib64/libc.so.6: symbol _dl_starting_up, version GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2 with link time reference

    ]$ sudo yum install libnotify*Loaded plugins: fastestmirror, refresh-packagekit, securitySetting up ...

  5. JDK 1.6.0和 6.0 有啥区别,JavaTM SE 6 的平台名字和版本号的说明(转)

    一直这么理解,今天才看到官方的解释,真是有点汗颜. 核心就是 6.0用于平台和产品的名字,而1.6.0用于开发者. 他们指的是同一个东西. 原文地址:http://java.sun.com/javas ...

  6. js中State模式的解析及运用

     状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...

  7. unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果

    在之前的一篇(链接在此)文章中写了下关于真实模拟皮肤渲染,在此基础之上又想加上血液效果,在洗澡的时候(=  =:)又想在skin上加上水珠的效果,所以研究了下,做出来效果感觉还不错,放下效果图: 水珠 ...

  8. JavaScript的Date 方法

    js中Date 方法 Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash ...

  9. JavaScript 兼容 Array.prototype.slice.call

    IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类. 在通过Array.prototype.slice.call进行数组化的时候,IE9之前的IE版本会抛出异 ...

  10. Delegate。。

    Delegate类简介------------------------ 命名空间:System程序集:mscorlib(在 mscorlib.dll 中) 委托(Delegate)类是一种数据结构,通 ...