搜尋
首頁web前端html教學CSS属性:background-size_html/css_WEB-ITnose

background-size属性用于指定背景图像的大小。

背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。

可以使用 cover关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用 contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。

一些 s 有固有的尺寸和比例,如 JPEG 图像,例如,其他图像如 s 已经没有任何固有的尺寸和比例,除非指定其他的值(请参阅下面的值),占用该元素的背景区域的大小。背景图像的最终呈现的大小取决于图像是否具有固有的尺寸和比例。

background-size属性采用关键字值 ( cover或 contain) 或一对非关键字值 ( | ),或一个非关键字值,值为 auto。例如:

background-size: cover; /* keyword value */background-size: contain; /* keyword value */background-size: 100% 50%; /* pair of non-keyword values */background-size: 300px 200px; /* pair of non-keyword values */background-size: 50% auto; /* non-keyword value + the value 'auto' */

至于两个值,第一个值指定图像的宽度,第二个值指定图像的高度。

如果只指定了一个非关键字值,另一个则被认为是 auto.

background-size属性还可以以逗号分隔值,以便当元素具有多个背景图像时,每个值应用于相应的背景图像 (第一个值对应第一个图像,第二个值对应第二个图像,等等)。

在下面这个交互式的演示案例中,单击不同的 background-size值,观察背景呈现的改变:

笔记

结合CSS 渐变(gradients) ,background-size属性可以创建有趣并具有创意的 背景模式。你可以在lea Verou写的 CSS3图案中阅读所有模式。

官方语法

语法

background-size: <bg-size> [ , <bg-size> ]*/* where */<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
  • 默认值: auto
  • 应用场景:所有元素
  • 动画支持:YES,不包括关键字值

属性值

值将在指定的方向上缩放背景图像。这里不允许指定负值。

percentage值将图像背景在指定的背景区域内缩放为指定的百分比大小,这里背景指定区域由 background-origin 属性值决定。除非 background-origin属性的值由作者设置,它具有 padding-box属性值,这就意味着,背景图像的定位是相对于其中心在 padding box的左上角的背景坐标系统。这里不允许使用负百分比值。

contain

缩放图像,同时保持其固有纵横比 (如果存在的话),到其最大的值,使其宽度和高度可以充斥其背景指定区域。如果背景图像有没有固有的比例和维度,然后它将呈现背景指定区域的大小。

cover

缩放图像,同时保持其固有纵横比 (如果存在的话),到最小的大小,这样它的宽度和高度可以完全覆盖背景指定区域。如果背景图像没有固有的比例和维度,然后它将呈现背景指定区域的大小。

auto

使用 auto关键字,在相应方向缩放背景图像,这样保持其固有的比例。

  • 如果图像有两个固有的尺寸 (高度和宽度),它将呈现它本身的大小。
  • 如果背景图像没有固有的比例和维度,然后它将以背景指定区域的大小呈现。
  • 如果图像没有比例,但是存在维度,它的呈现好像 contain就被指定一样。
  • 如果有一个固有的尺寸和一个比例,他将按照其尺寸和比例呈现。
  • 如果图像有一个固有的维度,但没有比例,它将按照其固有维度和对应背景指定区域的维度呈现。

注意事项

如果 background-size属性的值是对值,其中一个值是 auto,另一个值是 则:

  • 如果图像具有固有比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小,然后使用图像的比例来计算其他维度的值。所以,例如,第一个值是 length,第二值为 auto,然后图像呈现的的宽度将按照其指定的 length,图像的高度将基于图像的比例。
  • 如果图像没有固有的比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小。对于另一个方向 (其中值为 auto),浏览器将使用图像的尺寸,当然前提是,存在的情况下。例如,一个 JPEG 图像有两个固有维度 (高度和宽度),所以如果高度设置为一个 length值,宽度设置为 auto,浏览器将从图像中提取的宽度,并使用它,因为它有一个这个值。但是如果图像不具有固有的宽度 (例如 gradient(渐变)),浏览器也将呈现同一维度作为背景指定区域。

background-size属性也可以通过 inherit值,继承其父元素的值。例如: background-size: inherit.

案例

以下是所有有关 background-size属性的有效语法。

/* keyword value syntax */background-size: cover;background-size: contain;/* two-value syntax: first value specifies the width of the image and the second value specifies its height */background-size: 50% auto;background-size: 50px 30px;background-size: 10em 12em;/* one-value syntax: the second value is always assumed to be 'auto' */background-size: 32em;background-size: auto;background-size: 100%;

以下是用 background-size属性指定大小背景图像的所有实例。在此示例中的图像被假设为固有的尺寸和比例 (JPEG 图像,例如);

/* stretch the image to fill the background area ignoring image ratio */background-size: 100% 100%; /* the background image is shown at its intrinsic size */background-size: auto; /* default *//*  the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio */background-size: 3em; /* second value is assumed `auto` *//* this one forces the background image to be 15px by 15px */background-size: 15px 15px;

下面的示例有关图像拉伸的 (注意 background-repeat 属性和 background-origin 属性的值)。纵横比被保留了。

background-size: 50% auto;background-repeat: repeat;background-origin: border-box;

下面的示例指定两个背景图像的背景大小。第一个值指定第一个图像大小,第二个值指定第二个图像的大小。

background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);background-size: 100% 100%, contain;

下面的示例将强迫渐变图像的大小改变为 100px x 100px。

background: linear-gradient(left, white 50%, #8b0 50%);background-size: 100px 100px;

在线示例

更改以下演示中的 background-size属性的值,观察背景图像的呈现是如何改变的。

请您在更改值的同时,调整屏幕的大小,观察背景图像如何响应该元素的大小。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML文檔中的根標籤是什麼?HTML文檔中的根標籤是什麼?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,確保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML標籤和元素是同一件事嗎?HTML標籤和元素是同一件事嗎?Apr 28, 2025 pm 05:44 PM

文章解釋說,HTML標籤是用於定義元素的語法標記,而元素是完整的單位,包括標籤和內容。他們一起工作以構建網頁。查拉克計數:159

&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?Apr 28, 2025 pm 05:43 PM

本文討論了Lt; Head&gt; &&lt;身體&gt; HTML中的標籤,它們對用戶體驗的影響以及SEO的影響。正確的結構增強了網站功能和搜索引擎優化。

&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?Apr 28, 2025 pm 05:42 PM

本文討論了HTML標籤,和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。

請說明如何指示HTML中文檔使用的字符集?請說明如何指示HTML中文檔使用的字符集?Apr 28, 2025 pm 05:41 PM

文章討論了在HTML中指定字符,重點介紹了UTF-8。主要問題:確保正確顯示文本,防止亂七八糟的字符,並增強SEO和可訪問性。

HTML中的各種格式標籤是什麼?HTML中的各種格式標籤是什麼?Apr 28, 2025 pm 05:39 PM

本文討論了用於構建和造型Web內容的各種HTML格式標籤,強調了它們對文本外觀的影響以及語義標籤對可訪問性和SEO的重要性。

HTML元素的' ID”屬性與'類”屬性之間有什麼區別?HTML元素的' ID”屬性與'類”屬性之間有什麼區別?Apr 28, 2025 pm 05:39 PM

本文討論了HTML的“ ID”和“類”屬性之間的差異,重點是它們的獨特性,目的,CSS語法和特異性。它解釋了它們的使用如何影響網頁樣式和功能,並為

HTML中的'類”屬性是什麼?HTML中的'類”屬性是什麼?Apr 28, 2025 pm 05:37 PM

本文解釋了HTML“類”屬性在分組樣式和JavaScript操縱元素中的作用,將其與唯一的“ ID”屬性進行對比。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版