찾다
웹 프론트엔드CSS 튜토리얼CSS에서 그림이 반복적으로 늘어나지 않도록 설정하는 방법

CSS에서는 background-repeat 속성 값을 "no-repeat"로 설정하여 이미지가 반복적으로 늘어나지 않도록 설정할 수 있습니다. background-repeat 속성은 배경 이미지의 반복 여부와 방식을 설정할 수 있으며, 값이 "no-repeat"인 경우 스트레칭을 반복하지 않도록 설정됩니다.

CSS에서 그림이 반복적으로 늘어나지 않도록 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 배경 속성을 사용하여 배경 이미지를 설정할 수 있습니다.

background: url("1.jpg");

하지만 기본적으로 배경 이미지는 가로와 세로 모두 반복됩니다.

CSS에서 그림이 반복적으로 늘어나지 않도록 설정하는 방법

그렇다면 배경 이미지가 반복되는 것을 방지하는 방법은 무엇일까요? background-repeat 속성을 사용할 수 있습니다.

background-repeat 속성은 이미지 배경 이미지의 반복 여부와 방식을 설정할 수 있으며, 기본값은 가로, 세로 모두 반복됩니다.

background-repeat 속성 값을 no-repeat로 설정하면 배경 이미지가 한 번만 표시됩니다. 즉, 배경 이미지가 반복적으로 늘어나지 않습니다.

body{
    background: url("img/1.jpg");
    background-repeat:no-repeat;
}

CSS에서 그림이 반복적으로 늘어나지 않도록 설정하는 방법

추가됨: background-repeat 속성 값

설명
repeat default. 배경 이미지가 수직 및 수평으로 반복됩니다.
repeat-x 배경 이미지가 가로로 반복됩니다.
repeat-y 배경 이미지가 세로로 반복됩니다.
no-repeat 배경 이미지는 한 번만 표시됩니다.
inherit 은 background-repeat 속성의 설정이 상위 요소에서 상속되어야 함을 지정합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS에서 그림이 반복적으로 늘어나지 않도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것Apr 15, 2025 am 09:25 AM

최근 Svelte 주변에는 많은 과대 광고가 있었으며 프로젝트는 24,000 개가 넘는 Github 스타를 축적했습니다. 아마도 가장 간단한 JavaScript

주간 플랫폼 뉴스 : CSS 칼럼 스팬 속성, ADA는 웹 사이트, 자동 생성 이미지 설명에 적용됩니다.주간 플랫폼 뉴스 : CSS 칼럼 스팬 속성, ADA는 웹 사이트, 자동 생성 이미지 설명에 적용됩니다.Apr 15, 2025 am 09:23 AM

이번 주에 Roundup : 멀티 컬럼 레이아웃은 광범위한 지원을 받고 ADA는 소매 업체의 경우 더 많은 A11Y를 의미하며 Google은 모든 빈 이미지에 대해 무언가를하고 있습니다.

스타일링의 현재 상태는 2019 년에 선택됩니다스타일링의 현재 상태는 2019 년에 선택됩니다Apr 15, 2025 am 09:18 AM

CSS의 가장 원하는 기능을 마지막으로 컴파일했을 때부터 말할 수있는 가장 좋은 것은 스타일링 양식 컨트롤이 주요 요청이었습니다. 상위 5 개, 나는 ' D가 말한다. 그리고 원주민의

이 10 개의 프로젝트 아이디어로 2020 년에 프론트 엔드 마스터가 되십시오.이 10 개의 프로젝트 아이디어로 2020 년에 프론트 엔드 마스터가 되십시오.Apr 15, 2025 am 09:17 AM

이것은 내가 Dev에 쓴 Quickie 기사의 약간 업데이트 된 크로스 포스트입니다. 나는 여기에 출판된다.

왜 Parcel이 개발을 위해 Bundler가 된 이유왜 Parcel이 개발을 위해 Bundler가 된 이유Apr 15, 2025 am 09:16 AM

오늘 우리는 애플리케이션 번들러에 대해 이야기 할 것입니다 - 개발자로서 우리의 삶을 단순화하는 도구. 핵심적으로 번들러는 여러 파일에서 코드를 선택합니다.

주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱Apr 14, 2025 am 11:20 AM

이번 주에 Roundup : Firefox는 Locksmith-Like Powers를 얻는 Samsung '의 Galaxy Store가 프로그레시브 웹 앱을 지원하기 시작하고 CSS Subgrid는 Firefox에서 배송됩니다.

주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한Apr 14, 2025 am 11:15 AM

이번 주에 Roundup : Internet Explorer는 Edge로가는 길을 찾고 Google 검색 콘솔은 새로운 속도 보고서를 선전하고 Firefox는 Facebook의 알림을 제공합니다.

CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)Apr 14, 2025 am 11:11 AM

당신은 아마도 이미 CSS 변수에 익숙 할 것입니다. 그렇지 않다면 여기 2 초 개요가 있습니다. 실제로 사용자 정의 속성이라고합니다.

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尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

맨티스BT

맨티스BT

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

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구