우리는 CSS3에 매우 중요한 속성인 bachground-size 속성이 있다는 것을 알고 있습니다. 그 기능은 배경 이미지의 크기를 정의하는 것입니다. 자동, 픽셀 값, 백분율, 표지 및 포함의 5가지 값이 있습니다. 오늘은 bachground-size 속성을 사용하는 방법을 가르쳐 드리겠습니다.
background-size:auto 기본값은 이미지 자체의 크기로 요소를 채우고 요소의 크기에 따라 자체 비율을 조정하며 이미지를 변형하지 않습니다.
배경 크기 속성에 대한 CSS3
1.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>2. 배경 이미지 자체의 크기 - 너비: 200px, 높이: 133px 위 코드의 렌더링은 다음과 같습니다.
픽셀 값. 30px 50px는 각각 배경 크기 속성에 대한
CSS3을 나타냅니다.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>이 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하십시오. 중국사이트!
관련 자료:
Css3의 border-image 속성에 대한 자세한 소개
프런트 엔드 프로젝트에서 위치를 지정하는 여러 가지 방법
위 내용은 CSS3의 background-size 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
