主頁(yè) > 知識(shí)庫(kù) > background-position百分比原理詳解

background-position百分比原理詳解

熱門標(biāo)簽:鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 跟電銷機(jī)器人做同事 威海營(yíng)銷外呼系統(tǒng)招商 漳州人工外呼系統(tǒng)排名 農(nóng)村住宅地圖標(biāo)注 中紳電銷智能機(jī)器人 濟(jì)南辦理400電話 鄭州電銷外呼系統(tǒng)違法嗎 ai電銷機(jī)器人連接網(wǎng)關(guān)

今天幫別人調(diào)代碼時(shí),看到一個(gè)樣式:

background-position: 50% 0;
background-size: 100% auto;

對(duì)background-size:100% auto,意思是背景圖片寬度為元素寬度*100%,高度等比縮放。詳情可見css3 background。

對(duì)background-position很自然的以為百分比是根據(jù)父元素寬度計(jì)算的,但background-position真的不是,它有一套自己的原理。下面詳細(xì)介紹。

一、等價(jià)寫法

在看各類教程時(shí)有以下等價(jià)寫法:

  • top left, left top 等價(jià)于 0% 0%.
  • top, top center, center top 等價(jià)于 50% 0%.
  • right top, top right 等價(jià)于 100% 0%.
  • left, left center, center left 等價(jià)于 0% 50%.
  • center, center center 等價(jià)于 50% 50%.
  • right, right center, center right 等價(jià)于 100% 50%.
  • bottom left, left bottom 等價(jià)于 0% 100%.
  • bottom, bottom center, center bottom 等價(jià)于 50% 100%.
  • bottom right, right bottom 等價(jià)于 100% 100%.

那么為什么left,top就等價(jià)于0% 0%,right bottom等價(jià)于100% 100%呢?

二、background-position百分比計(jì)算公式

background-postion:x y;
x:{容器(container)的寬度—背景圖片的寬度}*x百分比,超出的部分隱藏。
y:{容器(container)的高度—背景圖片的高度}*y百分比,超出的部分隱藏。

有了這個(gè)公式,就很容易理解百分百寫法了,推算一下也就很容易理解上面各類等價(jià)寫法了。

三、舉例

1、background-position:center center等價(jià)于background-position:50% 50%等價(jià)于background-position:?px ?px

例子中用到背景圖如下【尺寸:200px*200px】:

背景圖在容器中居中。

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

效果都是讓背景圖片居中

如上通過設(shè)置百分比和關(guān)鍵字能實(shí)現(xiàn)背景圖居中,如果要實(shí)現(xiàn)通過具體值來設(shè)置圖片居中該設(shè)置多少?

根據(jù)上面公式:

x=(容器的寬度-背景圖寬度)*x百分比=(300px-200px)*50%=50px;

y=(容器的高度-背景圖高度)*y百分比=(300px-200px)*50%=50px;

即設(shè)置background-postion:50px 50px;

測(cè)試一下:

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
/*    background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

效果同樣居中。

到此這篇關(guān)于background-position百分比原理詳解的文章就介紹到這了,更多相關(guān)background-position 百分比內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:營(yíng)口 惠州 甘南 蘇州 文山 咸陽(yáng) 萍鄉(xiāng) 紅河

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《background-position百分比原理詳解》,本文關(guān)鍵詞  background-position,百分比,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《background-position百分比原理詳解》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于background-position百分比原理詳解的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章