CSS에서 배경을 타일링하지 않고 중앙에 배치하는 방법-프런트엔드 Q&A-php.cn

CSS에서 배경을 타일링하지 않고 중앙에 배치하는 방법

WBOY

풀어 주다： 2022-04-20 17:32:43

원래의

2807명이 탐색했습니다.

CSS에서는 "배경:url(경로) 반복 없음 센터;"를 사용하여 배경이 타일링되지 않도록 설정할 수 있습니다. 배경 속성은 "반복 없음"을 설정하는 데 사용됩니다. "는 배경이 타일링되지 않았음을 나타냅니다. Center 배경이 중앙에 있음을 나타냅니다.

CSS에서 배경을 타일링하지 않고 중앙에 배치하는 방법

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

CSS에서 배경을 타일링하지 않고 중앙에 설정하는 방법

배경 속성을 사용하세요.

Background 약어 속성은 하나의 명령문으로 모든 배경 속성을 설정할 수 있습니다.

특별한 순서 없이 각 값을 공백으로 구분하세요. background: #FF0000 URL(smiley.gif)과 같은 값 중 일부만 허용될 수 있습니다.

설정할 수 있는 속성은 다음과 같습니다.

background-color 사용할 배경색을 지정합니다.
background-position 배경 이미지의 위치를 지정합니다.
background-size 배경 이미지의 크기를 지정합니다. 배경 이미지
background-repeat 배경 이미지를 반복하는 방법을 지정합니다. 이미지가 고정되거나 페이지를 따라가는지 여부 나머지 스크롤입니다.
background-image 사용할 하나 이상의 배경 이미지를 지정합니다.
예는 다음과 같습니다:

<html>
<head>
<style type="text/css">
body
{ 
background: url(/i/eg_bg_03.gif) no-repeat center; 
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

로그인 후 복사