집 > 기사 > 웹 프론트엔드 > CSS에서 배경 이미지 크기를 설정하는 방법

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

青灯夜游원래의: 2021-04-14 18:04:0112017검색

CSS의 background-size 속성을 사용하여 배경 이미지의 크기를 설정할 수 있습니다. 구문은 "배경 크기: 값 | 백분율 | 표지 | 포함"입니다. 여기서 표지는 요소를 채우기 위해 비례적으로 확장된 이미지를 나타냅니다. , 포함은 요소의 크기에 맞게 비례적으로 축소된 이미지를 나타냅니다.

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

css3 배경 이미지의 크기를 설정하세요

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	background:url(img_flwr.gif);
	background-size:80px 60px;
	background-repeat:no-repeat;
	padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224"    style="max-width:90%"></p>

</body>
</html>

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

css3 background-size 속성

background-size 속성은 Firefox, Chrome 및 Chrome에서 사용할 수 있는 배경 이미지의 크기를 지정합니다. 즉9.

구체적인 사용법은 다음과 같습니다.

배경 이미지 크기(숫자 표현):

#background-size{ 
background-size:200px 100px; 
}

배경 이미지 크기(백분율 표현):

#background-size2{ 
background-size:30% 60%; 
}

배경 이미지 크기(비례 확장) 요소를 채울 그림, 즉 표지 값):

#background-size3{ 
background-size:cover; 
}

배경 이미지 크기(요소의 크기에 맞게 그림을 비례적으로 축소, 즉 값 포함):

#background-size4{ 
background-size:contain; 
}

배경 이미지 크기(그림 포함) 요소를 자체 크기, 즉 자동 값으로 채웁니다.

#background-size5{ 
background-size:auto; 
}

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

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

html5 firefox css chrome css3 auto background

성명：

이전 기사：CSS에서 이미지 크기를 설정하는 방법다음 기사：CSS에서 이미지 크기를 설정하는 방법