網頁制作之CSS背景屬性

  • 時間:2018-11-14 23:20 作者:小牛試講 來源:小牛試講 閱讀:183
  • 掃一掃,手機訪問
摘要:視頻加載中...1、 css背景屬性列表 background 簡寫屬性,作用是將背景屬性設置在一個公告中 background-color 設置元素的背景顏色 background-image 把圖像設置為背景 background-position 設置背景圖像的起始位置 background-

視頻加載中...

1、 css背景屬性列表

background

簡寫屬性,作用是將背景屬性設置在一個公告中

background-color

設置元素的背景顏色

background-image

把圖像設置為背景

background-position

設置背景圖像的起始位置

background-repeat

設置背景圖像能否及如何重復

background-attachment

背景圖像能否固定或者者隨著頁面的其他部分滾動

2.background-position詳解

方法一:使用少量關鍵字,如top bottom left right center,通常這些關鍵字會成對出現。其作用如其名稱所標明,例如:top right將背景圖片定位于元素的右上角。根據規范,位置關鍵字可以按任何順序出現,只需保證不超過兩個關鍵字——一個對應水平方向,另一個對應垂直方向。假如只出現一個關鍵字,則認為另一個關鍵字是center。

方法二:使用百分數值,百分數值的體現方式更為復雜。假設希望用百分數值將圖像在其元素中,這很容易background-position:50% 50%等價于background-position:center,其中心與元素的中心對齊。換句話說,百分數值同時應用于元素和圖像。也就是說圖像的中心點與元素的中心點對齊。

注意:假如使用值,第一個值代表水平方向,第二個值代表垂直方向。

思考:background-position:0% 0%與background-position:100% 100%的顯示效果為什么?

Background-position:66% 33%

注:background-position的默認值為0% 0%,在功能上相當于top left,這就解釋了背景圖像為什么總是從元素內邊距區的左上角開始平鋪。并且百分比與關鍵字相同,都是元素某個點與背景圖片某個點的對齊。

方法三:長度值,長度值解釋的是元素內邊距距左上角的偏移。偏移點是圖像的左上角。假如。設置值為50px 100px,圖像的左上角將在元素內邊距區左上角向右50px,向下100px的位置上。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】阿里云服務器Centos7搭建pptp VPN 一鍵安裝腳本 親測好用(2020-03-18 02:39)
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
2019白小姐旗袍图库