CSS學習筆記(七) 背景

Pikachu 發布于2019-08-28 18:03 / 907人閱讀

摘要：任何方向上都不重復只讓背景圖片顯示一次。，背景圖片就會以段落的中心點為起點。第一個值表示水平位置，第二個值表示垂直位置。拉大圖片，使其完全填滿背景區保持寬高比。提示漸變是幫我們生成的背景圖片。

在CSS里面，每個元素盒子都可以想象成由兩個圖層組成。

前景層：內容（如文本或圖片）和邊框。

背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（使用 background-image 屬性），背景圖片疊加在背景顏色之上。

在 CSS3 被瀏覽器實現之前，只能在背景顏色上添加一張圖片。而現在，我們可以為背景圖層添加多張圖片（以及 CSS3 漸變）。

CSS背景屬性：

background-color

background-image

background-repeat

background-position

background-size

background-attachment

background（簡寫屬性）

background-clip、background-origin、background-break（目前尚未得到廣泛支持）

1.背景顏色

格式：background-color: 顏色值;
示例：background-color: #caebff;

2.背景圖片

格式：background-image:url(圖片路徑/圖片文件名);
示例：background-image:url(images/blue_circle.png);

默認情況下背景圖片會 以元素左上角為起點，沿水平和垂直方向重復出現，最終填滿整個背景區域。

3.背景重復

格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說明：

repeat 默認值，水平和垂直方向都重復，直至填滿元素的背景區域為止。

repeat-x 水平方向重復。

repeat-y 垂直方向重復。

no-repeat 任何方向上都不重復（只讓背景圖片顯示一次）。

4.背景位置

用于控制背景位置的 background-position 屬性，是所有背景屬性中最復雜的。

該屬性有5個關鍵字值，分別是 top、left、bottom、right 和 center，這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。

background-position 屬性同時設定元素和圖片的原點。原點決定了元素和圖片中某一點的水平和垂直坐標。默認情況下，background-position的原點位于左上角。

第一種情況，使用關鍵字來設定位置。background-position屬性的默認值 top、left 控制著水平和垂直方向重復的起點。如修改 起點位置：p#center {background-position:center center;}（簡化寫法：background-position:center，設定一個關鍵值，則另一個也會取相同的值。），背景圖片就會以段落的中心點為起點。

第二種情況，使用百分比來設定位置。
示例：background-position:50% 50%;，再把 background-repeat 設定為 no-repeat，就能實現了圖片在背景區域內居中的效果。第一個值表示水平位置，第二個值表示垂直位置。要是只設定一個值，則將其用來設定水平位置，而垂直位置會被設為 center。

第三種情況，使用絕對或相對單位的數值。要是使用像素單位來設定位置，那么圖片的左上角會被放在距離元素左上角指定位置的地方。另外，還可以使用負值，這樣可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。當然也可以給圖片設定足夠大的正值，把圖片的右下角推到元素外部實現同樣的效果。

5.背景尺寸

background-size 是 CSS3 規定的屬性，用來控制背景圖片的尺寸。

可設定的值和含義如下：

50%：縮放圖片，使其填充背景區的一半。

100px 50px：把圖片調整到 100 像素寬，50 像素高。

cover：拉大圖片，使其完全填滿背景區；保持寬高比。

contain：縮放圖片，使其恰好適合背景區；保持寬高比。

注意：把很小的圖片拉大會導致圖片質量失真。

6.背景粘附

background-attachment屬性控制滾動元素內的背景圖片是否隨元素滾動而滾動。

屬性值有：

scroll。背景圖片隨元素移動。

fixed。背景圖片不會隨元素滾動而移動。

提示：background-attachment:fixed 最常用于給 body 元素中心位置添加淡色水印，讓水印不隨頁面滾動而移動。

7.簡寫背景屬性

示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
說明：聲明中少寫了哪個屬性的值（比如沒寫 no-repeat），就會使用相應屬性的默認值（ repeat）。

9.多背景圖片

CSS3 可以給元素背景添加多個背景圖片。

示例：

p {
    background:
    url(images/turq_spiral.png) 30px -10px no-repeat,
    url(images/pink_spiral.png) 145px 0px no-repeat,
    url(images/gray_spiral.png) 140px -30px no-repeat,  #ffbd75;
}

10.背景漸變

漸變，就是在一定長度內兩種或多種顏色之間自然的過渡。

提示：漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性，也可以使用簡寫 background 屬性。

漸變分兩種：

線性漸變。從元素的一端延伸到另一端。

放射性漸變。從元素內一點向四周發散。

11.廠商前綴

為鼓勵瀏覽器廠商盡早采用 W3C 的 CSS3 推薦標準，于是就產生了 VSP（Vendor Specific Prefixes，廠商前綴）的概念。

示例：
transform 屬性的標準語法是這樣的：
transform: skewX(-45deg);

由于這個屬性還沒有完全定案，為保證在大多數瀏覽器以及它們的實驗性實現中能夠使用這個屬性，應該針對想要支持的瀏覽器為該屬性添加 VSP。每個瀏覽器只使用各自能理解的屬性聲明：

-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微軟 Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最后是 W3C 標準屬性 */

以下 CSS3 屬性必須加 VPS：

border-image translate

linear-gradient transition

radial-gradient background*

transform background-image*

transform-origin
> *針對背景圖片或漸變

參考資料

CSS設計指南

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110987.html

Programming Computer Vision with Python （學習筆記七）

摘要：數學形態學關注的是圖像中的形狀，它提供了一些方法用于檢測形狀和改變形狀。所以這個結果也會把形狀以外的噪點排除掉。你還可以查看其它筆記。參考資料圖像的膨脹與腐蝕數學形態學基本操作及其應用計算機視覺特征提取與圖像處理第三版數學形態學（mathematical morphology）關注的是圖像中的形狀，它提供了一些方法用于檢測形狀和改變形狀。起初是基于二值圖像提出的，后來擴展到灰度圖像。...

Charles 2019-07-31 10:50 評論0 收藏0
26天學通前端開發（配資料）

摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。前言好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。網上有很多前端的學習路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
jQuery入門筆記之（七）插件

摘要：目前插件已超過幾千種，由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言，直接使用這些插件將快速穩定架構系統，節約項目成本。也就是說，插件也是代碼，通過文件引入的方式植入即可。現在我們就完成了一個下拉菜單的插件。插件(Plugin)也成為 jQuery 擴展(Extension)，是一種遵循一定規范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界...

defcon 2019-08-19 17:44 評論0 收藏0
前端復習筆記

摘要：一基本結構設置字符編碼集格式網頁頭部二文本標記加粗傾斜下劃線刪除線上標下標三引用樣式表的方式內聯樣式在元素的開始標簽里，設置一個屬性，并設置對應的屬性名及屬性值例使用場景里，使用給元素添加樣式內部樣式表在標簽里加上一對標簽，并且在標簽設置對一、基本結構 //設置字符編碼集格式 // //網頁頭部二、文本標記1.加粗 b2...

yhaolpz 2019-04-23 11:46 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0