Backgrounds

2018-05-15 17:26 更新
先決條件: HTML基礎(chǔ)知識(了解 HTML簡介)以及CSS的工作原理(了解 CSS簡介 >。)
目的: 要詳細(xì)了解樣式元素背景。

什么是背景?

元素的背景是位于元素內(nèi)容,填充和邊框下方的區(qū)域。 默認(rèn)情況下,無論如何,這是這種情況 - 在較新的瀏覽器中,您可以更改背景區(qū)域,使用 clip"title ="技術(shù)審查完成"> background-clip 屬性(請參閱 CSS / Introduction_to_CSS / Box_model#Background_clip"> CSS框模型文章background-clip coverage 了解詳情)。

背景不會位于邊緣下方 - 邊緣不會被視為元素區(qū)域的一部分,而是元素外部的區(qū)域。

還有許多其他不同的屬性,你可以用來操縱元素的背景,其中一些我們已經(jīng)在我們的課程中已經(jīng)看到了很多次:

  • background-color: Sets a solid color for the background.
  • background-image: Specifies a background image to appear in the background of the element. This can be a static file, or a generated gradient.
  • background-position: Specifies the position that the background should appear inside the element background.
  • background-repeat: Specifies whether the background should be repeated (tiled) or not.
  • background-attachment: Specifies the behaviour of an element's background when its content scrolls, e.g. does it scroll with the content, or is it fixed?
  • background: Shorthand for specifying the above five properties on one line.
  • background-size: Allows a background image to be resized dynamically

注意:這些功能中的大部分都具有非常好的瀏覽器支持,除了最后兩個功能,其中的支持有限(Internet Explorer 9+,Safari 7+,Android 4.4+), 背景漸變(Internet Explorer 9+)。

在本文的其余部分,我們將詳細(xì)介紹如何使用這些功能。

基本知識:顏色,圖像,位置,重復(fù)

讓我們來探討一個簡單的例子來展示四個最基本的屬性如何工作 - 你會在處理背景時使用這些屬性。

背景顏色

您將使用 ,通過顏色值或關(guān)鍵字transparent。"> background-color 屬性:

  • For a start, the default background color of most elements is not white (as you might expect) but transparent — therefore if you set an element's background color to something interesting, but want its child elements to be white, you'll have to set that explicitly.
  • In addition, it is important to set a background color as a fallback. Background colors are supported pretty much everywhere, whereas more exotic features such as background gradients are supported only in newer browsers, plus a background image might fail to load for some reason. It is therefore a good idea to set a basic background color as well as specifying such features, so the element's content is readable no matter what.

讓我們從建立一個例子開始。 我們將從一些簡單的HTML開始:

<p>Exciting box!</p>

讓我們給它一個背景顏色:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
}

結(jié)果如下:

背景圖

圖像是在堆疊上下文層之上繪制的,第一層指定的圖像被繪制為最接近用戶。"> background-image 屬性指定背景圖像 顯示在元素的背景中。 此屬性的最簡單用法是使用 url()函數(shù) - 它將圖像的路徑作為參數(shù) - 提取要插入的靜態(tài)圖像文件。 讓我們在上面的例子中添加一個背景圖片:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

結(jié)果如下:

這看起來不太好 - 默認(rèn)情況下,圖像在水平和垂直方向重復(fù)。 我們可以使用 背景圖片可以沿著水平軸,垂直軸,兩個軸重復(fù),或根本不重復(fù)。"> background-repeat ,我們接下來看看。

注意:幾乎任何圖片格式都支持 HTML圖片支持CSS背景圖片,包括SVG。

需要記住的一個重要的事情是,由于背景圖像使用CSS設(shè)置并出現(xiàn)在內(nèi)容的背景中,所以它們對于諸如屏幕閱讀器的輔助技術(shù)將是不可見的。 它們不是內(nèi)容圖片 - 它們只是用于裝飾 - 如果您要在頁面上包含作為內(nèi)容一部分的圖片,則應(yīng)該使用 / zh-CN / docs / Web / HTML / Element / img"title ="HTML img元素表示文檔中的圖像。>> < img> 元素。

背景重復(fù)

沿水平軸,垂直軸,兩個軸重復(fù),或根本不重復(fù)。"> background-repeat 允許您指定背景圖像的重復(fù)方式。 默認(rèn)值為 repeat ,如上所述,使圖像不斷重復(fù),直到整個元素背景填滿。 這不是我們想要的在這種情況下(雖然它可能在一些情況下,例如 .html"class ="external"> repeating-background.html )。 其他常見和廣泛支持的值是:

  • no-repeat: The image will not repeat at all: it will only be shown once.
  • repeat-x: The image will repeat horizontally all the way across the background.
  • repeat-y: The image will repeat vertically all the way down the background.

讓我們修復(fù)我們的例子:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

結(jié)果如下:

這當(dāng)然看起來更好,但圖像的定位是關(guān)閉 - 它當(dāng)前重疊的文本。 我們需要把它放在一個更好的地方。

背景位置

background-position a>允許我們將背景圖像放置在背景中的任何位置。 通常,屬性將采用兩個值,這兩個值由空格分隔,這兩個值指定圖像的水平(x)和垂直(y)坐標(biāo),即圖像的左上角。 將背景視為圖形,x坐標(biāo)從左到右穿過,y坐標(biāo)從上到下。

該屬性可以接受許多不同的值類型; 您最常使用的是:

  • Absolute values like pixels, for example background-position: 200px 25px.
  • Relative values like rems, for example background-position: 20rem 2.5rem.
  • Percentages, for example background-position: 90% 25%.
  • Keywords, for example background-position: right center. These two values are intuitive, and can take values of left, center, right, and top, center, bottom, respectively.

您應(yīng)該注意,您可以混合和匹配這些值,例如 background-position:99%center 。 還要注意,如果只指定一個值,則該值將被假定為水平值,垂直值將默認(rèn)為 center 。

讓我們修正我們的例子:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

結(jié)果如下:

背景圖像:漸變

還有另一組可用的值 背景圖像一個元素的圖像,這些圖像是在堆疊的上下文層之上繪制的,第一個圖層被繪制為最接近用戶。"> background-image > - 顏色漸變,它們是背景上的平滑顏色過渡。 動態(tài)生成的梯度作為一個特征被引入,因?yàn)樵诰W(wǎng)頁設(shè)計(jì)中使用漸變是如此受歡迎,但使用背景圖像實(shí)現(xiàn)漸變是相當(dāng)不靈活。 目前有兩種類型的梯度 - 線性梯度(從一條直線到另一條線)和徑向梯度(從單個點(diǎn)輻射出來)。

在本文中,我們將僅關(guān)注第一種類型,第二種類型稍微復(fù)雜一點(diǎn),而且不常用。 您可以在文章末尾的鏈接中找到更多關(guān)于這兩者的信息。

線性漸變是通過將 linear-gradient()函數(shù)作為 CSS / background-image"title ="CSS background-image屬性為一個元素設(shè)置一個或多個背景圖像,這些圖像是在堆疊的上下文層上繪制的,第一個圖層被繪制為最接近 給用戶。"> background-image 屬性。 該函數(shù)至少需要以逗號分隔三個參數(shù) - 漸變應(yīng)該跨越背景的方向,開始處的顏色和結(jié)束處的顏色。 例如:

background-image: linear-gradient(to bottom, orange, yellow);

該梯度將從頂部到底部,從頂部以橙色開始,并且在底部平滑地轉(zhuǎn)變?yōu)辄S色。 您可以使用關(guān)鍵字指定方向(到底部到右,到右下等) > 0deg 相當(dāng)于頂部, 90deg 等效于到右邊,最多到 360deg 代碼>到頂部)。

您還可以沿著顏色定義的漸變指定其他點(diǎn)(這些點(diǎn)稱為顏色停止),瀏覽器將找出每個設(shè)置的顏色停止點(diǎn)之間的顏色漸變。 例如:

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

這個梯度將從頂部到底部,從黃色開始,沿著元素向下漸變至橙色的40%,然后在100%處回到黃色。 您可以根據(jù)需要指定多個停止點(diǎn),也可以使用其他單位(例如 rem , px 等)指定停止點(diǎn)的位置。

讓我們在示例中添加一個線性漸變:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
  background-repeat: no-repeat;
  background-position: 99% center;
}

結(jié)果如下:

請注意,您還可以使用 repeating-linear-gradient()函數(shù)設(shè)置重復(fù)線性漸變。 這完全相同的方式工作,除了你設(shè)置的模式重復(fù)一遍又一遍,直到背景的邊緣。 例如:

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

這將創(chuàng)建一個漸變,漸變從黃色到橙色,再沿著漸變每50像素回來。

背景附件

我們可用于背景的另一個選項(xiàng)是指定當(dāng)內(nèi)容滾動時它們?nèi)绾螡L動。 這是使用 屬性確定圖片的位置是否固定在視口內(nèi),或者隨其包含的塊一起滾動。"> background-attachment 屬性可以采用以下值:

  • scroll: This fixes the background to the page viewport, so it will scroll as the page scrolls. Note we said viewport, not element — if you scroll the actual element the background is set on, not the page, the background won't scroll.
  • fixed: This fixes the background in position on the page, so it won't scroll as the page scrolls — it will stay in exactly the same position whether you scroll the page or the element the background is set on.
  • local: This value was added later on (it is only support in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the bacground scrolls with it.

圖片的位置固定在視口中,或者隨著其包含的塊一起滾動。"> background-attachment 屬性只有在有內(nèi)容要滾動時才有效果,因此我們 演示來演示三個值之間的差異 - 請查看 external"> background-attachment.html (也 >見這里的源代碼)。

背景速記

可以使用 / CSS / background"title ="背景CSS屬性是用于在樣式表中的單個位置設(shè)置單個背景值的縮寫。背景可用于設(shè)置以下值中的一個或多個:background-clip,background- 顏色,背景圖像,背景原點(diǎn),背景位置,背景重復(fù),背景大小和背景附件。"> background 屬性。 為此,您使用與單個屬性中相同的值,但是將它們?nèi)糠旁谟煽崭穹指舻囊恍猩?,如下所?

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

未在縮寫中指定的任何屬性將被分配默認(rèn)屬性。 您可以查看 背景可以用于設(shè)置背景剪輯,背景顏色,背景圖像,背景原點(diǎn),背景位置,背景重復(fù),背景尺寸和背景顏色中的一個或多個的值。 background-attachment。"> background 參考頁,以了解這些默認(rèn)值是什么,以及其他屬性可以包含在 background 速記中。

讓我們回到我們激動人心的框例子,并用速記替換現(xiàn)有的屬性。 我們可以替換所有這些屬性:

background-color: yellow;
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-repeat: no-repeat;
background-position: 99% center;

有了這個:

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

最終代碼如下所示:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

結(jié)果如下:

多個背景

最近(從Internet Explorer 9開始),我們已經(jīng)能夠?qū)⒍鄠€背景附加到單個元素。 這是一件好事,因?yàn)槎鄠€背景是非常有用的。 您用逗號分隔不同的背景定義:

background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;              

和背景是堆疊在一起的頂部,第一個出現(xiàn)在頂部,然后第二個在它下面,然后第三個,這可能不是你的期望,所以小心。 還要注意,我們已將后備背景顏色放入單獨(dú)的屬性聲明,因?yàn)閲L試將其包含在多個背景中似乎打破了東西。

您還可以將多個值放入longhand background - * 屬性中,例如:

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

雖然你可能最好使用背景速記 - 不僅是更快的寫,但更容易看到哪些背景屬性適用于哪些背景。

在多個背景可用之前,Web開發(fā)人員必須將多個 或HTML文檔分割元素)是流內(nèi)容的通用容器,它不會固有地表示任何東西。它可以用于將元素分組用于樣式目的(使用類或id屬性),或者因?yàn)樗鼈児蚕韺傩灾?,例如lang 。只有當(dāng)沒有其他語義元素(例如article或nav)適當(dāng)時,才應(yīng)使用它們。"> < div> 元素,然后將單獨(dú)的背景圖片 每:

<div class="background1">
  <div class="background2">
    <div class="background3">
      <p>My content</p>
    </div>
  </div>
</div>

這工作,但它導(dǎo)致了相當(dāng)雜亂的難以閱讀的標(biāo)記。 如果您需要支持舊版本的Internet Explorer,則可能仍需執(zhí)行此操作。

讓我們將多個背景放到我們激動人心的盒子示例 - 我們想要看到漸變和火球,在同一時間:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
? background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
????????????? linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

這給我們以下結(jié)果:

注意:您可以在完成的示例中 Github (請參閱源代碼 代碼)。

背景尺寸

正如我們前面提到的,有一個屬性可用 - 背景圖像的大小,圖像的大小可以完全約束或只是部分以保持其內(nèi)在比率。"> background-size - 允許您動態(tài)更改 背景圖像的大小,以便它更適合您的設(shè)計(jì)。 這在許多方面非常有用,例如自動更正未正確上傳的圖標(biāo)的大小。 請記住,這不是Internet Explorer版本低于9,所以你不能依賴它,如果你需要支持舊的瀏覽器。 對于每個背景圖像,您需要包括兩個背景尺寸值 - 一個用于水平尺寸,一個用于垂直尺寸:

background-image: url(myimage.png);
background-size: 16px 16px;

您可以使用所有期望的長度單位,以便指定所需的值 - px ,百分比, rem 等。

您可以在包含鏈接上的圖標(biāo)中看到一個使用的 background-size 示例。

主動學(xué)習(xí):使用背景

這個積極的學(xué)習(xí)會議也沒有正確的答案 - 在這里我們希望你玩背景和有一些樂趣,你繼續(xù)前。 你可以:

  • Set a different background color.
  • Include a different background image — find an absolute path to an image to use inside the url() function.
  • Apply a background gradient.
  • Apply multiple backgrounds.
  • Include a background-size property to alter the size of your background images.

如果您作為課程或?qū)W習(xí)小組的一部分關(guān)注此事,您的老師或?qū)熞部赡軙槟瓿梢恍╊~外的任務(wù)。

如果發(fā)生錯誤,您可以隨時使用重置按鈕重置。

概要

這篇文章應(yīng)該教你大部分你需要知道的樣式元素背景。 希望你會有一些樂趣在路上太! 在下一篇文章中,我們將使用邊框,并看看如何風(fēng)格。

也可以看看

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號