1. 程式人生 > >background-position背景圖片定位,圖片位置計算問題

background-position背景圖片定位,圖片位置計算問題

background-position的說明:
     設定或檢索物件的背景影象位置.必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響.(在IE的幾個版本中都是一樣的,測試說明這裡的意思就是:下文中容器(container)的寬度(即內容部分,沒有包含border),這個寬度應該把padding也計算在內的.)
     預設值為: 0% 0% .

此時背景圖片將被定位於物件不包括補丁( padding )的內容區域的左上角。
     如果只指定了一個值,該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值,第二個值將用於縱座標.

一.background-position:left top;

背景圖片的左上角和容器(container)的左上角對齊,超出的部分隱藏。
等同於 background-position:0,0;
也等同於background-position:0%,0%;

二.background-position:right bottom;

背景圖片的右下角和容器(container)的右下角對齊,超出的部分隱藏。
等同於background-positon:100%,100%;
也等同於background-positon:容器(container)的寬度-背景圖片的寬度,容器(container)的高度-背景圖片的高度

三.background-position:500px 15px;

背景圖片從容器(container)左上角的地方向右移500px,向下移15px,超出的部分隱藏。

四.background-position:-500px -15px;
背景圖片從容器(container)左上角的地方向左移500px,向上移15px,超出的部分隱藏。

五.background-position:50% 50%;(一直都模糊這個值是怎樣計算的...冏^||"~"^)

等同於left:{容器(container)的寬度—背景圖片的寬度}*left百分比,超出的部分隱藏。
等同於right:{容器(container)的高度—背景圖片的高度}*right百分比,超出的部分隱藏。
例如:background-position:50% 50%;就是background-position:(1000-2000)*50%px, (500-30)*50%px;即background-position:-500px,235px;也就是背景圖片從容器(container)的左上角向左移500px,向下移235px;

六.background-position:-50% -50%;

(這種情況背景圖片應該用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明顯)
等同於left:-{{容器(container)的寬度—背景圖片的寬度}*left百分比(百分比都取正值)},超出的部分隱藏。
等同於right:-{{容器(container)的高度—背景圖片的高度}*right百分比(百分比都取正值)},超出的部分隱藏。
例如:background-position:-50% -50%;就是background- position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即 background- position:-250px,-70px;也就是背景圖片從容器(container)的左上角向左移250px,向上移 70px;

後記:昨天在IE6下,用css-sprites和backgroupd-position用圖片來做圓角,發現產生了2PX的偏差,下部分無法和上部分重合在一起,後來用over-flow:hidden;就可以,不知道這是不是IE6下的一個BUG....哎....對IE6,簡直就是無語了,看了下網站的統計,還有那麼的人在用IE6,悲傷呀...

相關推薦

background-position背景圖片定位,圖片位置計算問題

background-position的說明:     設定或檢索物件的背景影象位置.必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響.(在IE的幾個版本中都是一樣的,測試說明這裡的意思就是:下文中容器(cont

CSS中背景圖片位置屬性background-position

    該屬性用來定義元素背景圖片的起始位置,在背景圖片的背景圖片位置屬性中,可以使用兩種屬性值,一種為長度單位,包括長度值 和百分比值;另一種為指定值,包括top, center, bottom, left, righ等,其語法結構如下:     background-p

css控制背景圖片位置-background-position

最近經常給div在加背景圖片的時候,發現背景圖片的位置總是跟自己想要的效果不一樣,所以就粗略的研究了一下,把結果和過程跟大家一起分享一下。現在就用div來舉例子,其他的容器也都一樣。主要來介紹一下背景background的幾個屬性。我們給一個div加上背景後,先僅僅控制背景

css3圓角、邊界圖片、盒子陰影、背景大小、填充位置定位位置背景顏色漸變

1. css3圓角:border-radius (1)這是個複合屬性:比如:border-radius:10px; == border-radius:10px 10px 10px 10px;對應的四個角:左上角,右上角,右下角,左下角 == 四個值分別對應:border

css實現對背景圖片定位,獲得一張圖片上不同位置的內容

實現這個小技巧也不是新鮮事。 使用CSS的背景屬性,實現對背景的定位,這樣就可以根據需要取出不到的影象位置實現只讀一次,多處使用。 實現起來不難,最根本的程式碼就是:background-position:X Y,用於定位背景圖片。 下面有個例子,以例說話: 這是我用於

背景圖片拉伸,計算屏幕寬度和獲取控件寬高

屏幕寬度 ack context splay ots focus pri bool thp 背景圖片拉伸: 那麽如果我們想在Activity的onCreate方法或者是onReusme方法獲取組件的寬高怎麽辦呢?這裏提供了以下的五種方式:http://blog.csdn.

div css CSS標準 background image背景圖片

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

Html+Css CSS中背景圖片定位方法

CSS中背景圖片的定位,困擾我很久了。今天總算搞懂了,一定要記下來。 在CSS中,背景圖片的定位方法有3種:   1)關鍵字:background-position: top left;   2)畫素:background-position: 0px 0px;

CSS background-image背景圖片相關介紹

這裡將會介紹如何通過background-image設定背景圖片,以及背景圖片的平鋪、拉伸、偏移、設定大小等操作。 1. 背景圖片樣式分類 CSS中設定元素背景圖片及其背景圖片樣式的屬性主要以下幾個: 下面將詳細說明各屬性。 2. background-image :設定元

background-position 屬性設定背景影象的起始位置

語法: background-position : length || length background-position : position || position取值: length  : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位  position  : top |

應用啟動時將白屏背景替換成圖片/顏色/動畫等 僅供參考

lns cte star cat 16px 繼承 encoding 默認啟動 drawable 1.創建自己的主題樣式(style) 在vules資源目錄下的style中創建一個樣式 <style name="MyTheme" parent="Theme

Tesseract處理背景漸變的圖片

漸變圖 () filepath png ocr識別 背景漸變 處理 lose 圖片 在Tesseract處理背景漸變圖片不太理想的情況下, 可以利用Pillow庫, 創建一個閾值過濾器來去掉漸變的背景色, 只把文字留下來, 從而讓圖片更清晰, 便於Tesseract讀取:

tableView 上添加圖片 修改任意位置

tlab all gin font width add user clas index p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color:

subplot 設置不一樣的圖片大小和位置

sin exp sub posit tla brush wid 設置 http t=[0:0.1:25]; y1=exp(-t/3); y3=sin(2*t+3); y2=log(t+1); subplot(2,2,1) plot(t,y1,‘linewidth‘,2)

Windows截圖 圖片 預設儲存位置

答案:沒有預設儲存位置,即時釋放,不儲存 怎麼儲存:按Print screen後,選“貼上”即可 原因:獲得的截圖暫存在系統貼上板內,其資料儲存在記憶體裡,而不是儲存在硬碟上,其暫時儲存在系統貼上板內。 需要注意:貼上板內的資料是自動更新的,也就是說,按一次Print Screen鍵獲得

033本地圖片上傳csdn設定圖片大小及位置

當你用vs code寫好了文件,該文件圖文豐富,圖片都是本地圖片,上傳到csdn。納尼,我要一張一張重新傳?納尼,不能調整圖片大小和位置?前一個問題還沒解決(不想用圖床,看起來好麻煩),後一個問題有辦法了。 一開始你的效果是這樣的: 這個時候你可以到csdn的編

Word圖片大小總是對不齊,如何統一圖片的大小位置,看一眼就會!

還在為圖片大小位置不統一而發愁嗎,這樣做出來的word文件不美觀圖片看起來也是大小不一很不協調。今天就教大家幾個簡單的處理圖片的辦法,快來學習吧! 修改圖片預設環繞方式 大家在word中插入圖片的時候有沒有遇到這樣的麻煩,插入的圖片無法移動,必須要手動設定一下環繞方式才可以移動圖片,這樣做太費事

位置計算:無線網路定位》學習小結

第一章:無線定位概述 單跳定位:WiFi,GPS,NBIOT等單跳網路結構的定位 多跳定位:感測網、物聯網等無線自組織網路的網路定位(多跳定位)   無論何種定位技術,都離不開以下3個主要環節: (1)物理測量。 對物理世界的測量手段包括WiFi,GNSS,BlueTooth,Qcell

位置計算:無線網絡定位》學習小結

輸入 實現 數據統計 似然 服務 gps 非線性 持續更新 因此 第一章:無線定位概述 單跳定位:WiFi,GPS,NBIOT等單跳網絡結構的定位 多跳定位:傳感網、物聯網等無線自組織網絡的網絡定位(多跳定位) 無論何種定位技術,都離不開以下3個主要環節: (1)物理測

Java 圖片加文字水印以及圖片水印 水印位置可選

package com.product.utils; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; import org.apache.commo