집 > 기사 > 웹 프론트엔드 > CSS3의 background-size 속성에 대한 자세한 소개

CSS3의 background-size 속성에 대한 자세한 소개

php中世界最好的语言원래의: 2017-11-30 16:34:492652검색

우리는 CSS3에 매우 중요한 속성인 bachground-size 속성이 있다는 것을 알고 있습니다. 그 기능은 배경 이미지의 크기를 정의하는 것입니다. 자동, 픽셀 값, 백분율, 표지 및 포함의 5가지 값이 있습니다. 오늘은 bachground-size 속성을 사용하는 방법을 가르쳐 드리겠습니다.

background-size:auto 기본값은 이미지 자체의 크기로 요소를 채우고 요소의 크기에 따라 자체 비율을 조정하며 이미지를 변형하지 않습니다.

배경 크기 속성에 대한 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;
}
</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의 다른 관련 기사에 주목하십시오. 중국사이트!