css 样式 图片平铺整个界面
比如一个容器(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 样式 图片平铺整个界面的更多相关文章
- ie8下背景图片平铺问题
IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
- Duilib技巧:背景图片平铺
贴图的描述 方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...
- android实现图片平铺效果&WebView多点触控实现缩放
1.图片平铺效果实现非常简单,只要在xml中添加一个 android:tileMode的属性就可以了.首先在drawable文件夹中添加自己的my.xml文件.代码: Java代码 <?xml ...
- Bootstrap-全局CSS样式-图片样式
Bootstrap第二部分:全局CSS样式-图片样式.img-rounded 圆角图片.img-circle 圆形图片.img-thumbnail 缩略图片.img-responsive响应 ...
- CSS背景横向平铺BUG,解决方法
给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...
- Canvas 图片平铺设置
/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...
- [UWP]通过自定义XamlCompositionBrushBase实现图片平铺
1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...
- LODOP中设置设置图片平铺水印,超文本透明
之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...
随机推荐
- userdate和table类型的效率对比
做cocos2d-x开发的人可能有不少人在实现类时会利用cocos2d-x自己给出的类的实现,也即在luaBinding目录下extern.lua的文件中给出的实现: --Create an clas ...
- show processlist 其中status详解(适用于所有概况)
mysql show processlist分析 2011-04-11 16:13:00 分类: Mysql/postgreSQL mysql> show processlist; +—–+—— ...
- Linux下使用Speedtest测试网速
导读 Speedtest是用来测试网络性能的开源软件,在Linux下面安装Speedtest可以用来测试网络出口的上传和下载速度,帮助排查网络方面导致的故障. Speedtest介绍 由于公司几个项目 ...
- iphone/ipad图标尺寸
http://www.yixieshi.com/ucd/13759.html APP界面设计规范指导APP设计过程中的设计标准,根据统一的设计标准,使得整个APP在视觉上统一.提高用户对APP的产品认 ...
- linux下软件安装的方法
linux下软件的安装与卸载 第一章 linux下安装软件,如何知道软件安装位置 注:一般的软件的默认安装目录在 jdk-1_6_0_14-linux-i586-rpm.bin ←修改为 ...
- python 最佳入门实践
勿在浮沙筑高台,无论什么技术,掌握核心精神和api,是很重要的. 但是入门过程也可能不是一帆风顺的,这里有八个入门任务,看看你完成了没有: http://code.tutsplus.com/artic ...
- 关于Linux下进程间使用共享内存和信号量通信的时的编译问题
今天在编译一个使用信号量实现进程同步时,出现了库函数不存在的问题.如下图 编译结果实际上是说,没include相应的头文件,或是头文件不存在(即系统不支持该库函数) 但我man shm_open是可以 ...
- Object-c 控制语句
控制语句: 分支语句 if-else 有控制机制 switch 循环语句 while do-while for 跳转语句 break,continue,goto
- Hadoop中操作HDFS出现异常的解决方法
Hadoop环境搭建成功后,一般会运行一个小例子,这时候就涉及到了对HDFS文件系统的操作,对于刚开始学习Hadoop的初学者一般会多次的进行name节点的格式化操作,最后导致上传文件会抛出异常,通过 ...
- HDU2044 小蜜蜂斐波那契
一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...