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. sublime 技巧与快捷键篇

    技巧大全:https://www.zhihu.com/question/24896283   项目排除文件夹,更便于ctrl + p的搜索,比如可恶的node_modules "folder ...

  2. [MeetCoder] Count Pairs

    Count Pairs Description You are given n circles centered on Y-aixs. The ith circle’s center is at po ...

  3. Android 源码解析:单例模式-通过容器实现单例模式-懒加载方式

    本文分析了 Android 系统服务通过容器实现单例,确保系统服务的全局唯一. 开发过 Android 的用户肯定都用过这句代码,主要作用是把布局文件 XML 加载到系统中,转换为 Android 的 ...

  4. [svc]linux文件权限

    linux中,每个文件拥有三种权限 f dir权限位最佳实战 权限 对文件的影响 对文件夹的影响 r 可读取/阅读文件的内容 可以列出目录内容,无法cd,ls -l看到文件名,属性是乱码. w 可修改 ...

  5. VS2015 调试中断点突然失效的解决办法、VS调试时关闭调试让浏览器继续保留页面

    VS2010 调试中断点突然失效的解决办法 问题描述:在调试前加了断点,但debug时红色的断点变成透明的圆圈加一个感叹号,执行到该处时也不会停止. 这个问题遇到过几次了,前几次都没怎么注意,有时候是 ...

  6. error occurred during the file system check

    fsck -c 然后一路:y reboot 问题解决!!!

  7. [Windows Azure] Building worker role B (email sender) for the Windows Azure Email Service application - 5 of 5.

    Building worker role B (email sender) for the Windows Azure Email Service application - 5 of 5. This ...

  8. 非nodejs方式的vue.js的使用

    1.node环境 详细见我之前的文章,node的安装 2.git环境 git bash命令窗,支持bash命令,cmd不支持bash命令 3.cnpm安装 cnpm是针对国内使用npm网络慢的而使用的 ...

  9. ExecutorService-10个要诀和技巧【转】

    http://ifeve.com/executorservice-10-tips-and-tricks/

  10. 泛微OA e-cology8 数据库链接

    数据库恢复 数据库恢复的恢复请按照如下步骤进行: Ø 重新安装对应版本的数据库服务软件 Ø 通过数据库软件本身的还原工具还原备份数据库文件 Sqlserver可以通过企业管理器直接还原备份文件或者附加 ...