成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)筆記(七) 背景

Pikachu / 924人閱讀

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

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

前景層：內(nèi)容（如文本或圖片）和邊框。

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

  
在 CSS3 被瀏覽器實(shí)現(xiàn)之前，只能在背景顏色上添加一張圖片。而現(xiàn)在，我們可以為背景圖層添加多張圖片（以及 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);

  
默認(rèn)情況下背景圖片會 以元素左上角為起點(diǎn)，沿水平和垂直方向重復(fù)出現(xiàn)，最終填滿整個背景區(qū)域。
3.背景重復(fù)

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

repeat 默認(rèn)值，水平和垂直方向都重復(fù)，直至填滿元素的背景區(qū)域為止。

repeat-x 水平方向重復(fù)。

repeat-y 垂直方向重復(fù)。

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

4.背景位置 
  
用于控制背景位置的 background-position 屬性，是所有背景屬性中最復(fù)雜的。

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

background-position 屬性同時設(shè)定元素和圖片的原點(diǎn)。原點(diǎn)決定了元素和圖片中某一點(diǎn)的水平和垂直坐標(biāo)。默認(rèn)情況下，background-position的原點(diǎn)位于左上角。

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

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

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

5.背景尺寸

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

可設(shè)定的值和含義如下：

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

100px 50px：把圖片調(diào)整到 100 像素寬，50 像素高。

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

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

  
注意：把很小的圖片拉大會導(dǎo)致圖片質(zhì)量失真。
6.背景粘附

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

屬性值有：

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

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

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

示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
說明：聲明中少寫了哪個屬性的值（比如沒寫 no-repeat），就會使用相應(yīng)屬性的默認(rèn)值（ 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.背景漸變

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

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

漸變分兩種：

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

放射性漸變。從元素內(nèi)一點(diǎn)向四周發(fā)散。

11.廠商前綴

為鼓勵瀏覽器廠商盡早采用 W3C 的 CSS3 推薦標(biāo)準(zhǔn)，于是就產(chǎn)生了 VSP（Vendor Specific Prefixes，廠商前綴）的概念。

示例：
transform 屬性的標(biāo)準(zhǔn)語法是這樣的：
transform: skewX(-45deg);

由于這個屬性還沒有完全定案，為保證在大多數(shù)瀏覽器以及它們的實(shí)驗性實(shí)現(xiàn)中能夠使用這個屬性，應(yīng)該針對想要支持的瀏覽器為該屬性添加 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 標(biāo)準(zhǔn)屬性 */

以下 CSS3 屬性必須加 VPS：

border-image translate

linear-gradient transition

radial-gradient background*

transform background-image*

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

參考資料

CSS設(shè)計指南

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110987.html

相關(guān)文章

  • Programming Computer Vision with Python （學(xué)習(xí)筆記七）

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

    Charles 評論0 收藏0

  • 26天學(xué)通前端開發(fā)（配資料）

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

    blair 評論0 收藏0

  • jQuery入門筆記之（七）插件

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

    defcon 評論0 收藏0

  • 前端復(fù)習(xí)筆記

    摘要：一基本結(jié)構(gòu)設(shè)置字符編碼集格式網(wǎng)頁頭部二文本標(biāo)記加粗傾斜下劃線刪除線上標(biāo)下標(biāo)三引用樣式表的方式內(nèi)聯(lián)樣式在元素的開始標(biāo)簽里，設(shè)置一個屬性，并設(shè)置對應(yīng)的屬性名及屬性值例使用場景里，使用給元素添加樣式內(nèi)部樣式表在標(biāo)簽里加上一對標(biāo)簽，并且在標(biāo)簽設(shè)置對一、基本結(jié)構(gòu) //設(shè)置字符編碼集格式 // //網(wǎng)頁頭部 二、文本標(biāo)記1.加粗 b2...

    yhaolpz 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    baoxl 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<