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. 个人用户使用genymotion 模拟器

    genymotion android模拟器速度快,比较好用.对公司使用的是要收费的,但是对个人使用还是免费的,所以个人用户还可以继续使用.使用方法 1.注册账号,填写用户名.邮箱.密码.公司类型(选g ...

  2. mysqlslap 压力测试工具

    [背景] 由于一些不可描述的原因,我要确定一条业务SQL在给定的MySQL环境下的执行效率:比如说200个session同时跑同样一条SQL 我们数据库的吞吐量怎么样? 刚收到这个需求的时候,感觉这个 ...

  3. 查询系统负载信息 Linux 命令详解

    linux uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令过去只显示系统运行多久.现在,可以显示系统已经运行了多长 时间,信息显示依次为:现在时间.系统已经运 ...

  4. 香蕉派 banana pi BPI-M3 八核开源硬件开发板

     Banana PI BPI-M3 是一款8核高性能单板计算机,Banana PI BPI-M3是一款比树莓派 2 B更强悍的8核Android 5.1产品. Banana PI BPI-M3 兼 ...

  5. 怎样使用 Apache ab 以及 OneAPM 进行压力測试？

    下一个 release 准备小长假后就要 go-live .全部的測试 case 都 cover 过了.但还未进行过压力測试,有点不放心,刚好过节期间家人都回家去了,假期最终能够抽点时间压測一把. A ...

  6. 译: 2. Apache Axis2安装指南

    Apache Axis2安装指南 本文档提供有关Axis2分发包,系统先决条件以及设置环境变量和工具的信息,然后提供有关安装方法的详细说明. 请将您的反馈发送至:java-dev@axis.apach ...

  7. Atitit opencv模板匹配attilax总结

    Atitit opencv模板匹配attilax总结 找一幅图像的匹配的模板,可以在一段视频里寻找出我们感兴趣的东西,比如条形码的识别就可能需要这样类似的一个工作提取出条形码区域(当然这样的方法并不鲁 ...

  8. 通过ip查找能应机器的MAC

    例如:10.100.0.61 这些都是基于linux系统: 首先:ping 一下这个ip 然后arp 10.100.0.61就可以找出主机的MAC地址

  9. （原创）如何使用boost.asio写一个简单的通信程序（二）

    先说下上一篇文章中提到的保持io_service::run不退出的简单办法.因为只要异步事件队列中有事件,io_service::run就会一直阻塞不退出,所以只要保证异步事件队列中一直有事件就行了, ...

  10. python（39）：argparse的用法,从外部传入指定参数

    直接上例子: # /usr/bin/env python # coding=utf8 import os import argparse import logging import sys FORMA ...