1. 理想中的效果是这样的

 

2. 然后想改一下圆圈的大小

 

3. 容器大小为偶数，图片大小为奇数，就会使图片并不真正居中，如果仔细量一下，会发现图片上面比下面多1px!

貌似只有 background-size: 100% 100%; 可以解决这个问题：

 

background-size 导致的背景不居中问题的更多相关文章

  1. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  2. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  3. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  4. 9.png(9位图)在android中作为background使用导致居中属性不起作用的解决方法

    在使用到9.png的布局上面添加 android:padding="0dip" 比如 <LinearLayout            android:layout_widt ...

  5. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  6. [android界面]android中src和background区别——前景与背景

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  7. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  8. WPF DataGrid row background converter datagrid 行背景随绑定数据变化,转换器

    <DataGrid Grid.Row=" ItemsSource="{Binding SalesList,UpdateSourceTrigger=PropertyChange ...

  9. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

随机推荐

  1. bat 批处理脚本定时执行命令

    有个需求,需要每天定时执行下某个任务,一天一次.由于工作机器环境问题,没有办法设置windows 定时任务.查找资料并完成如下脚本. 功能:每天定时执行一次任务. 复制如下脚本,到一个test.vbs ...

  2. 安装windows后grub修复

    安装windows之后发现ubuntu进不去了,主要原因在于grub被windows干掉了. 原本希望通过使用u盘来进行修复,结果U盘不被识别. 于是通过easybcd启动ubunt live光盘.进 ...

  3. Starting with neural network in matlab[zz]

    转自:http://matlabbyexamples.blogspot.com/2011/03/starting-with-neural-network-in-matlab.html The neur ...

  4. haproxy 关闭ssl3

    在使用的过程中,我们发现在用IE浏览器的时候 我们设置成 然后我们的网站会出现部分页面不出来 然后我们也发现在扫面网站链接的时候 所以当务之急是关闭ssl3 我这里的反向代理使用的是haproxy 版 ...

  5. MTStatusBarOverlay (状态栏，添加自定义内容库)

    NSString * message = [NSString stringWithFormat:@"%@成功", text]; MTStatusBarOverlay *overla ...

  6. jQuery学习笔记（简介，选择器）

    jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...

  7. tomcat 8080 冲突 急速解决方法 -------屡试不爽

    cmd    输入: netstat -ano|findstr 8080 记住 最后的端口号**** 再输入: taskkill  /pid  ****  /f

  8. Android开发中无处不在的设计模式——动态代理模式

    继续更新设计模式系列.写这个模式的主要原因是近期看到了动态代理的代码. 先来回想一下前5个模式: - Android开发中无处不在的设计模式--单例模式 - Android开发中无处不在的设计模式-- ...

  9. java https 请求

    http://li3huo.com/index.php/2009/09/https-certificates-are-ignoring-the-right-java-http-client/

  10. Atitit codeblock c++开发环境建立attilax总结

    Atitit codeblock c++开发环境建立attilax总结 1.1. C++的重要意义 1 1.2. 项目ide的选项 1 1.3. 安装MinGW  (基于GCC的C++编译器)  50 ...