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

#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. 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. 【HDU3247】 Resource Archiver(DP+AC自动机+最短路)

    Resource Archiver Time Limit: 10000MS   Memory Limit: 100000KB   64bit IO Format: %I64d & %I64u ...

  2. 关于spring3中No Session found for current thread!and Transaction的配置和管理(转)

    今天我是特别的郁闷,本来项目做到一半,以前都好好的,结果下午就出现问题,苦逼的到现在才解决.它出现问题的时候都一声不坑, ,(天啦,现在才发现CSDN啥时候把QQ表情给整过来了)就在注册用户的时候,咦 ...

  3. Bluetooth LE(低功耗蓝牙) - 第一部分

    前言 在写这篇文章的时候,谷歌刚刚发布了Android Wear ,摩托罗拉也发布了 Moto 360 智能手表.Android Wear的API还是相当基本的,是很好的文档材料,而且还会不断的更新, ...

  4. 495. Kids and Prizes

    http://acm.sgu.ru/problem.php?contest=0&problem=495 学习:当一条路走不通,换一种对象考虑,还有考虑对立面. 495. Kids and Pr ...

  5. 【转】MongoDB资料汇总专题

    1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 MongoDB GridFS MongoDB GridFS 介绍 一个NoSQL与MongoD ...

  6. hdu 4717 The Moving Points(三分+计算几何)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4717 说明下为啥满足三分: 设y=f(x) (x>0)表示任意两个点的距离随时间x的增长,距离y ...

  7. JavaScript之this指针深入详解

    javascript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或 ...

  8. 由链表初始化看C语言的二级指针

    先来看C语言创建链表.插入节点和遍历链表的一段代码: #include <stdio.h> #include <stdlib.h> typedef int ElemType; ...

  9. Maven学习系列二(1-5)

    Maven学习系列二(1-5) 本文转自 QuantSeven 博客,讲解精炼易懂,适合入门,链接及截图如下 http://www.cnblogs.com/quanyongan/category/47 ...

  10. redux-applyMiddleware实现理解+自定义中间件

    前言: 终于好好理解了middleware.... 1.redux middleware提供的是位于 action 被发起之后,到达 reducer 之前的扩展点. redux通过store.disp ...