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. 阮一峰 IaaS，PaaS，SaaS 的区别

    链接: IaaS,PaaS,SaaS 的区别 作者: 阮一峰 日期: 2017年7月23日 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infras ...

  2. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  3. [WebGL入门]十八，利用索引缓存来画图

    注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

  4. SQL存储过程教程

      一直以来,对SQL SERVER的存储过程和触发器都基本没有用到,只是偶尔从网上找几个简单的函数PASTE到我的SQL中用.自己写总是感觉缺点什么,前几天单位的培训讲了一天的SQL SERVER, ...

  5. vue.js $refs和$emit 父子组件交互

    父调子 $refs (把父组件的数据传给子组件)  <template> <div id="app"> <input type="butto ...

  6. FFmpeg(11)-基于FFmpeg进行音频重采样(swr_init(), swr_convert())

    一.包含头文件和库文件 修改CMakeLists # swresample add_library(swresample SHARED IMPORTED) set_target_properties( ...

  7. 如何使用KVM 虚拟机安装RHEL7系统

    KVM(基于内核的虚拟机)是标准的RHEL内核中内置的完整的虚拟化解决方案.它可以运行多款未经修改的Windows和Linux虚拟客户机操作系统.RHEL中的KVM系统管理程序通过libvirtAPI ...

  8. Android 网络请求get/post工具类:NetUtil

    package com.net.util;   import java.io.IOException; import java.io.UnsupportedEncodingException; imp ...

  9. 【ARM】arm异常中断处理知识点

    ARM处理器7种类型异常 按优先级从高到低的排列如下: 复位异常(Reset) 数据异常(Date Abort) 快速中断异常(FIQ) 外部中断异常(IRQ) 预取异常(Prefetch Abort ...

  10. c语言中条件编译相关的预编译指令

    一. 内容概述 本文主要介绍c语言中条件编译相关的预编译指令,包括#define.#undef.#ifdef.#ifndef.#if.#elif.#else.#endif.defined. 二.条件编 ...