• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS background-position

                  2018-8-4 09:32| 作者: admin| 查看: 908| 评论: 0|来自: 蚂蚁部落

                  设置元素背景图片是页面布局中常见操作,通过background属性即可实现。

                  background是一个复合属性,也它可以一次性设置多个特性。

                  代码如下:

                  [CSS] 纯文本查看 复制代码
                  div{background:#F60 url(logo.gif) top right no-repeat}

                  本文单独介绍一下背景定位属性background-position,因为它相对有点难度。

                  一.基本概念:

                  background-position属性可以设置背景图片的位置。

                  设置背景图片位置是刚需,因为并不是所有的背景图片放在元素中都是恰到好处的,甚至还需要动态效果。

                  语法结构:

                  [CSS] 纯文本查看 复制代码
                  background-position : length || position

                  参数解析:

                  (1).length :<percentage> | <length>。

                  (2).position:top | center | bottom | left | center | right。

                            top:背景图像在垂直方向,从顶部开始绘制。 

                            bottom:背景图像在垂直方向,从底部开始绘制。

                            left:背景图像在水平方向,从左边开始绘制。 

                            center:背景图像水平和垂直方向上居中。 

                            right:背景图像在水平方向上,从右边开始绘制。 

                  如果该属性提供两个属性值,第一个用于横坐标,第二个用于纵坐标。

                  如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

                  background-position用来控制背景图片的在所在元素中的位置,当然这个定位需要参照坐标系。

                  数学中,原点是两个坐标轴的交点(0,0),CSS中也大致如此,只不过数学中,y轴向上为正,CSS相?#30784;?/p>

                  默认原点(0px 0px)位置是元素的左上角,默?#29486;?#24577;下背景图片的左上角位于坐标原点位置。

                  所要定位的背景图片的坐标其实就是背景图片左上角相对于原点的坐标。

                  坐标系图示如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201808/21/154451x0o8meaz2n6ycnym.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  由于IE6和IE7(当前完全可以不用考虑)与其他浏览器渲染效果不同,参考点也有所不同。

                  图示如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201808/22/112615l2w5m0vkjtmoknt0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  CSS3提供了更多操控元素背景图片的功能,本文不做介绍,具体参阅如下文章:

                  (1).CSS3 background-size一章节。

                  (2).CSS3 background-origin一章节。 

                  (3).CSS3 background-clip一章节。

                  (4).CSS3 设置多个背景图片一章节。

                  二.实例代码演示:

                  a:3:{s:3:\"pic\";s:43:\"portal/201808/04/093357u4sbmo03ofms7z43.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  309x99的图片分隔为9份,每一份的长宽分别是103px和33px。

                  下面的所有实例将使用九宫格图片作为背景,通过精确的控制,可以很好的演示background-position功能。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  .ant{
                    background-color:green;
                    background-image:url(mytest/demo/mybg.png);
                    background-position:0px 0px;
                    background-repeat:no-repeat;
                    width:400px;
                    height:300px;
                  } 
                  </style>
                  </head>
                  <body>
                  <div class="ant"></div>
                  </body>
                  </html>

                  默认定位状态下的背景图片,背景图片位于元素的左上?#24688;?/p>

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  .ant{
                    background-color:green;
                    background-image:url(mytest/demo/mybg.png);
                    background-position:0px -33px;
                    background-repeat:no-repeat;
                    width:400px;
                    height:300px;
                  } 
                  </style>
                  </head>
                  <body>
                  <div class="ant"></div>
                  </body>
                  </html>

                  坐标设置为0px -33px;Y轴坐标值设置为负值,将背景图片在Y轴上从原点向上移动。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .ant{
                    background-color:green;
                    background-image:url(mytest/demo/mybg.png);
                    background-position:-103px 0px;
                    background-repeat:no-repeat;
                    width:400px;
                    height:300px;
                  } 
                  </style>
                  </head>
                  <body>
                  <div class="ant"></div>
                  </body>
                  </html>

                  将背景图片的坐标设置为-103px 0px;X轴坐标值设置为负值,是将图片从原点向左移动。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .ant{
                    background-color:green;
                    background-image:url(mytest/demo/mybg.png);
                    background-position:-103px -33px;
                    background-repeat:no-repeat;
                    width:400px;
                    height:300px;
                  } 
                  </style>
                  </head>
                  <body>
                  <div class="ant"></div>
                  </body>
                  </html>

                  将背景图片的坐标设置为-103px -33px。

                  1

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            江西多乐彩投注技巧 甘肃快三和值表 龙虎和老时时彩走势图 重庆幸运农场历史开奖号码走势图 足彩总进球 老11选5快乐彩 香港赛马会九肖中特 历史上414组选前后关系 河北快三和值号码 澳客网手机客户端 吉林快3跨度和值走势图 安徽时时彩快3遗漏号 六合图库助手安卓下载 河北十一选五 体彩排列三和尾走势图