CSS學習筆記 背景

2021-10-08 15:11:20 字數 1550 閱讀 8452

background-color 屬性定義了元素的背景顏色。頁面的背景顏色使用在body的選擇器中:

>


charset


="utf-8"


>


>


prcorangetitle


>


>


>h1p


divstyle


>


head


>


>


>


css background-color 例項!h1


>


>


改文字插入在 div 元素中。


>


該段落有自己的背景顏色。p


>


我們仍然在同乙個 div 中。


div>


body


>


html


>
預設情況下，背景影象進行平鋪重複顯示，以覆蓋整個元素實體.

>


>


charset


="utf-8"


>


>


prcorangetitle


>


>


body


style


>


head


>


>


>


hello world!h1


>


body


>


html


>
如果影象只在水平方向平鋪 (repeat-x)

body
如果你不想讓影象平鋪

body
以上例項中，背景影象與文字顯示在同乙個位置，為了讓頁面排版更加合理，不影響文字的閱讀，我們可以改變影象的位置。可以利用 background-position 屬性改變影象在背景中的位置:

body
影象放置關鍵字最容易理解的作用就像其名字的意義。例如，top left 使影象放置在元素內邊距區的左上角。只要保證不超過兩個關鍵字：乙個對應水平方向，另乙個對應垂直方向，那麼你可以設定位置關鍵字以任何順序出現。如果只有乙個關鍵字，則會預設另乙個關鍵字為 center。所以，如果希望每個段落的中部上方出現乙個影象，只需宣告如下：

p
百分數值的表現方式更為複雜。假設你希望用百分數值將影象在其元素中居中，你可以按照下面的**進行設定：

body
長度值解釋的是元素內邊距區左上角的偏移，偏移點是影象的左上角。比如，如果設定值為 50px 100px，影象的左上角將在元素內邊距區左上角向右 50 畫素、向下 100 畫素的位置上：

body

css學習筆記 背景

background 設定元素的背景 背景顏色與背景可以同時設定 background position 設定從背景的什麼位置開始填充,按水平與垂直方向設定 可選值 top left right bottombackground position left top 也可以通過畫素來設定backgro...

CSS學習筆記（四） 背景

通過background color設定背景顏色，值可以為rgb通道或者顏色編碼，rgb通道可以設定透明度 article article article通過background image設定背景，注意不會撐開元素，不會改變元素大小 在預設情況下，背景會填充整個border內部，通過背景裁剪可以限...

CSS3學習筆記 背景

背景 background color backgound image backgound position backgound 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 1 backgo...