Site updated: 2024-07-30 22:50:00

JO

2024-07-30 892e9c94a661c34cf9063b1ee04aae8027c8fe4c

 fd2c842.html

ÎļþÃû´Ó 12288.html ÐÞ¸Ä
@@ -21,7 +21,7 @@
    <meta name="description" content="因为本人不爱用雪碧图，平时background-position用的并不多，一直以为百分比定位和像素定位是一样的逻辑原理，按容器像素换算百分比就可以了呀！呸，傻子！css的法则在脸上胡乱的拍，啪啪啪~！！痛过之后，有了以下理解： åƒç´ ä¸Žç™¾åˆ†æ¯”换算对于background-position的百分比值，我们最容易理解的是以下的情况：这种情况乍一看，好像又简单又合情合理，但是，我们思考一下，（0%，0%">
<meta property="og:type" content="article">
<meta property="og:title" content="理解background-position百分比定位">
<meta property="og:url" content="http://zxq.im/12288.html">
<meta property="og:url" content="http://zxq.im/fd2c842.html">
<meta property="og:site_name" content="ZXQ">
<meta property="og:description" content="因为本人不爱用雪碧图，平时background-position用的并不多，一直以为百分比定位和像素定位是一样的逻辑原理，按容器像素换算百分比就可以了呀！呸，傻子！css的法则在脸上胡乱的拍，啪啪啪~！！痛过之后，有了以下理解： åƒç´ ä¸Žç™¾åˆ†æ¯”换算对于background-position的百分比值，我们最容易理解的是以下的情况：这种情况乍一看，好像又简单又合情合理，但是，我们思考一下，（0%，0%">
<meta property="og:locale" content="en_US">
@@ -30,18 +30,18 @@
<meta property="og:image" content="http://zxq.im/assets/img/00003.jpg">
<meta property="og:image" content="http://zxq.im/assets/img/00004.jpg">
<meta property="article:published_time" content="2018-10-11T16:00:00.000Z">
<meta property="article:modified_time" content="2021-04-23T01:25:16.310Z">
<meta property="article:modified_time" content="2024-07-30T14:49:25.898Z">
<meta property="article:author" content="ZXQ">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://zxq.im/assets/img/00001.jpg">





<link rel="canonical" href="http://zxq.im/12288.html">

<link rel="canonical" href="http://zxq.im/fd2c842.html">







<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://zxq.im/12288.html","path":"12288.html","title":"理解background-position百分比定位"}</script>

<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://zxq.im/fd2c842.html","path":"fd2c842.html","title":"理解background-position百分比定位"}</script>



<script class="next-config" data-name="calendar" type="application/json">""</script>

<title>理解background-position百分比定位 | ZXQ</title>

@@ -197,7 +197,7 @@
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://zxq.im/12288.html">
    <link itemprop="mainEntityOfPage" href="http://zxq.im/fd2c842.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/avatar.png">
@@ -229,15 +229,6 @@
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2018-10-12 00:00:00" itemprop="dateCreated datePublished" datetime="2018-10-12T00:00:00+08:00">2018-10-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
        </span>
    </span>

  
@@ -277,12 +268,12 @@

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/58913.html" rel="prev" title="hexo常用命令">
                <a href="/33f59116.html" rel="prev" title="hexo常用命令">
                  <i class="fa fa-angle-left"></i> hexo常用命令
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/49928.html" rel="next" title="各种语言运行环境的安装">
                <a href="/9f159a23.html" rel="next" title="各种语言运行环境的安装">
                  å„种语言运行环境的安装 <i class="fa fa-angle-right"></i>
                </a>
            </div>