css3背景1. background-size2. background-origin3. background-clip示例：className{ background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 .....
分类：
Web程序 时间：
2015-07-06 16:02:31
阅读次数：
143
1. 理想中的效果是这样的2. 然后想改一下圆圈的大小3. 容器大小为偶数，图片大小为奇数，就会使图片并不真正居中，如果仔细量一下，会发现图片上面比下面多1px!貌似只有 background-size: 100% 100%; 可以解决这个问题：
分类：
其他好文 时间：
2015-07-02 15:23:15
阅读次数：
80
今天帮别人调代码时，看到一个样式：background-position: 50% 0;background-size: 100% auto；对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。对back...
分类：
其他好文 时间：
2015-06-30 23:18:23
阅读次数：
238
最初的代码：1 .container_first {2 width: 100%;3 height: 100%;4 background: url(10176581.jpg);5 background-size: cover;6 position: relati...
分类：
Web程序 时间：
2015-06-18 21:29:22
阅读次数：
263
background-clip属性用于指定背景的显示范围。属性值如下：
background-origin属性用于指定在绘制背景时，从边框的左上角开始或者从内容的左上角开始。属性值如下：
background-size用于指定背景图像的尺寸。属性值如下：
background-break属性用于指定内联元素背景图像进行平铺时的循环方式。循环方式介绍如下：
在...
分类：
其他好文 时间：
2015-06-16 14:48:41
阅读次数：
125
做移动端页面时，设计稿中的切片图片往往是实际的2倍,此处记录图片正常显示大小的技巧。当图片是单张的话，可以对容器设计实际大小，然后设置background-image,为了让图片缩小一倍，可以设置background-size:contain;如：图片尺寸是20*20，但是在移动端页面显示的则是10...
分类：
移动开发 时间：
2015-06-15 18:36:51
阅读次数：
135
废话当然不说了。直接上代码
#mycon
{
background:url('Tpl/1.jpg');
background-size:400px 400px;
background-repeat:no-repeat;
border-radius: 4px;
border: 1px solid #ccc;
width: 400px;
height: 400px;
}
...
分类：
Web程序 时间：
2015-06-12 11:49:22
阅读次数：
122
在给网页加背景图时会遇到：图片过大，只能显示出部分，不能完整的显示出来，实现不了设计的效果，怎么办？无标题文档View Codebackground:url(images/hi-wifi-bg.jpg) no-repeat center center; background-size:100% 10...
分类：
Web程序 时间：
2015-06-11 18:41:12
阅读次数：
304
sprite背景图优化，通过设置css3 background-size来压缩大图达到高清效果，来解决H5网页在手机浏览器下图标模糊的问题。...
分类：
移动开发 时间：
2015-06-09 20:04:13
阅读次数：
2109
前面我写过如何优化Retina屏幕下的图像。如何优化Retina屏幕下的图像一文中从CSS3的background-size切入，介绍了background-size的属性使用方法，然后转入正题，介绍了Retina屏幕下的图像优化。如果你对background-size属性不太了解，建议你先了解一下...
分类：
Web程序 时间：
2015-06-08 11:21:11
阅读次数：
318
