찾다
웹 프론트엔드CSS 튜토리얼CSS에서 배경 이미지의 크기를 설정하는 방법

CSS에서 배경 이미지의 크기를 설정하는 방법

Nov 24, 2020 pm 02:37 PM
css크기배경 이미지

CSS에서 배경 이미지의 크기를 설정하는 방법: [배경 크기:80px 60px;]와 같이 배경 크기 속성을 사용하여 설정할 수 있습니다. [배경 크기] 속성은 너비와 크기를 지정할 수 있습니다. 배경 이미지의 높이입니다.

CSS에서 배경 이미지의 크기를 설정하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

(추천 튜토리얼: css 비디오 튜토리얼)

CSS에서 배경 이미지의 크기를 설정하는 방법:

속성 소개:

background-size 속성은 배경 이미지의 크기를 지정합니다.

구문: ​​

background-size: length|percentage|cover|contain;

속성 값:

  • length 배경 이미지의 높이와 너비를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 제공되면 두 번째 값은 자동으로 설정되고

  • percentage는 배경을 기준으로 위치 지정 영역의 백분율을 계산합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 값이 하나만 주어지면 두 번째 값은 "auto"

  • 커버로 설정되어 이미지의 가로 세로 비율을 유지하고 배경 위치 영역을 완전히 덮을 수 있는 가장 작은 크기로 이미지 크기를 조정합니다.

  • contain 이렇게 하면 이미지의 가로 세로 비율이 유지되고 배경 위치 지정 영역에 맞는 최대 크기로 이미지 크기가 조정됩니다.

예:

배경 이미지 크기 제어

div
{
    background:url(img_flwr.gif);    
    background-size:80px 60px;    
    background-repeat:no-repeat;
}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS에서 배경 이미지의 크기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
가변 글꼴 링크 덤프!가변 글꼴 링크 덤프!Apr 16, 2025 am 10:22 AM

최근 가변 글꼴에 대해 날아 다니는 훌륭한 물건이 많았습니다 (우리의 태그에는 많은 물건이 있습니다). 나는 모든 새로운 것들을 반올림한다고 생각했다.

링크는 블록 배경으로 애니메이션을 강조합니다링크는 블록 배경으로 애니메이션을 강조합니다Apr 16, 2025 am 10:14 AM

그것은 멋진 작은 효과입니다. 기본 링크 스타일에는 밑줄이 있습니다 (좋은 아이디어입니다).

필요한 페이지가 필요하기 직전에 사전로드필요한 페이지가 필요하기 직전에 사전로드Apr 16, 2025 am 09:53 AM

웹 사이트를 탐색하는 사람을위한 일반적인 여정 : 페이지보기, 링크를 클릭하고 브라우저가 새 페이지를로드합니다. 그것은 단일 페이지와 같은 재미있는 사업이 없다고 가정합니다

Flexbox가있는 적응 형 사진 레이아웃Flexbox가있는 적응 형 사진 레이아웃Apr 16, 2025 am 09:51 AM

일련의 임의의 사진 세트에 대한 수평 벽돌 효과를 만들기위한 초경량 방법을 살펴 보겠습니다. 사진 세트를 던져

HTML 및 CSS와 모양과 이미지를 연결하는 많은 방법HTML 및 CSS와 모양과 이미지를 연결하는 많은 방법Apr 16, 2025 am 09:45 AM

다른 웹 사이트 디자인은 종종 클릭 이벤트에 응답하기 위해 사각형이나 사각형 이외의 모양을 요구합니다. 아마도 당신의 사이트에는 어떤 종류의 기울기가 있거나 있습니다

웹 개발자 검색 기록웹 개발자 검색 기록Apr 16, 2025 am 09:41 AM

Sophie Koonin은 웹 개발자와 웹 개발자와

스프라이트에서 모든 SVG를 볼 수있는 스 니펫스프라이트에서 모든 SVG를 볼 수있는 스 니펫Apr 16, 2025 am 09:31 AM

SVG 스프라이트를 다음과 같이 생각합니다.

새로운 브라우저 설치를 첫 번째로 열면 어떻게됩니까?새로운 브라우저 설치를 첫 번째로 열면 어떻게됩니까?Apr 16, 2025 am 09:29 AM

Jonathan Sampson의 흥미로운 연구에서 네트워크가 브라우저가 처음으로 신선한 설치로 시작할 때 브라우저를 요청하는 것을보고 있습니다.

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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

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

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.