在DIV設置背景圖片，位置選擇

我知道如何設置背景像一個div：在DIV設置背景圖片，位置選擇

background: url(/images/image.gif) no-repeat top right;

有時候，我需要更爲精細的控制，不如說是頂部，中部或底部等。

我已經看到人們在位置部分使用'em'，那是幹什麼的？

來源

2010-02-26 Blankman

See the MDN reference for background-position.您也可以使用百分比或其他CSS測量單位設置x或y偏移來代替一般術語。 em是指當前元素的字體大小的單位，但您也可以使用px作爲像素偏移量。

來源

2010-02-26 22:26:45 Matchu

現在是一個斷開的鏈接。 – Kzqai 2013-06-17 23:09:50

@Kzqai：很好！無論如何，更新指向MDN是因爲它更徹底。爲了將來的參考，這是爲什麼我們允許社區編輯的一個很好的例子：當你看到一個斷開的鏈接，而不是期望作者保持他們3歲的答案更新（不幸的是，網絡比我們更脆弱'喜歡），請隨時自行更新鏈接。畢竟，投票是我們質量控制工具箱中的輔助工具;它的作用就是使這種資源最好地發揮作用，編輯是這裏更有效率的工具。 – Matchu 2013-06-18 00:19:42

我可能已經這樣做了，但我不打算修復一個破損的w3schools鏈接。 http://w3fools.com – Kzqai 2013-06-18 11:42:19

請記住em是RELATIVE大小 - 所以1em是相對於我的容器而不是實際大小。 A 1是基於我的瀏覽器默認值的1em。

所以父母（說.parent）與1em和0.75em的孩子將是父母的.75。那個0.5em的父母的孫子將是0.75的0.5em，即原始1em的0.375，而不是原來的0.5。

我沒有使用.px - 它更容易啓動，但是當您需要更改所有內容時，您需要隨處更改它 - 因此，如果將1em更改爲1.25em，它也會更改子級，孫子嵌套在那些。

對於一個具體的例子，如果我把margin-top：0.5em;在CSS中，我說的是將當前字體的一半高度作爲頂部邊距。

.px - 像素根據顯示器設置而變化，並且源於屏幕分辨率。 .pt - 是點，這意味着在印刷頁上，72點約爲1英寸 - 它來自印刷材料。％有良好的起源，百分比，我發現長期管理更加困難。他們有標記的起源。

大多數瀏覽器都有12pt（點）字體作爲基礎（如果我沒有記錯的話），它是1em，它實際上是未知數量的像素。所以，如果我記得.625em大概是10點，那麼如果我將身體設置爲.625em，那麼我的.5em在5點以下，身體下面的2em將是20點，等等。

編輯：我的數學叮咬在一天結束:)所以10/12是.8333 - 所以我們需要.8333不是.625，但你明白了。

來源

2010-02-26 22:56:05

梯度可以通過

background:#fff url(images/vertical_sliced_image.gif) repeat-y;

或

background:#fff url(images/horizontal_sliced_image.gif) repeat-x;

來控制你可以切片1px的高度或寬度1px的（梯度圖像）和在背景水平或垂直重複它...

希望這可以幫助

來源

2010-08-28 23:13:48

在DIV設置背景圖片，位置選擇

回答

相關問題