찾다
웹 프론트엔드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으로 문의하세요.
Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.

휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:15 PM

휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?Apr 30, 2025 pm 03:12 PM

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?Apr 30, 2025 pm 03:09 PM

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...

휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:06 PM

모바일 장치에서 애플리케이션을 개발할 때 휴대폰에 대한 기본 선택 문제는 종종 사용자가 선택 해야하는 시나리오에 직면합니다. 네이티브 셀 ...

왜 일부 웹 사이트는 마우스 스크롤 및 침투 효과를 달성 할 수있는 반면 다른 웹 사이트는 할 수 없습니까?왜 일부 웹 사이트는 마우스 스크롤 및 침투 효과를 달성 할 수있는 반면 다른 웹 사이트는 할 수 없습니까?Apr 30, 2025 pm 03:03 PM

마우스 스크롤링 이벤트의 구현 원리 탐색 일부 웹 사이트를 탐색 할 때 일부 페이지 요소는 마우스가 호버링 될 때 여전히 전체 페이지를 스크롤 할 수 있음을 알 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기