길이 값이나 백분율로 표시되는 배경 이미지의 크기를 설정합니다. 표지 및 포함을 통해 이미지 크기를 조정할 수도 있습니다.
배경 크기 속성 사용법에 대한 자세한 설명:
배경 크기 속성에는 두 개의 매개변수가 있습니다(cover 및 contain은 여기에 포함되지 않음) , 매개변수 값은 정확한 숫자 값, 백분율 또는 기본값인 auto일 수 있습니다. 예:
background-size:200px 100px;
배경 크기:50% 50%;
배경 크기:자동;
배경 크기 속성에 대한 다음 매개변수 간단히 소개하자면:
매개변수가 하나만 있는 경우 이 값은 배경 이미지의 너비를 지정하는 데 사용됩니다. 이때 배경 이미지의 높이 값은 너비에 비례하여 조정됩니다.
두 개의 매개변수가 제공되는 경우 첫 번째 매개변수는 배경 이미지의 너비를 지정하는 데 사용되고 두 번째 매개변수는 배경 이미지의 높이를 지정하는 데 사용됩니다.
코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px 100px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Background-size 속성은 두 개의 매개변수를 사용합니다. 첫 번째 매개변수는 배경 이미지의 너비를 200px로 지정하고, 두 번째 매개변수는 배경 이미지의 높이를 지정합니다. 100px로.
다른 코드 예를 살펴보세요:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.first{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px;
background-repeat:no-repeat;
}
.second{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:600px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="first"></li>
<li class="second"></li>
</ul>
</body>
</html> 위 코드에서 Background-size 속성은 매개변수를 지정하고, 이 매개변수는 배경 이미지의 너비와 배경의 높이를 지정하는 데 사용됩니다. 이미지는 너비 값 등을 기준으로 합니다. 비례 배율, 배경 이미지의 크기가 컨테이너를 초과하면 잘립니다.
Background-size 속성 값이 auto이면 배경 이미지가 원래 크기에 따라 표시됩니다. 여기서는 설명할 필요가 없습니다.
다음은 이 속성의 표지 및 포함 속성 값을 소개합니다.
1. 표지 속성:
속성 값을 표지로 설정한 후 배경 이미지가 컨테이너를 완전히 덮을 수 있도록 비율을 조정합니다. 자르다.
커버는 영어로 덮는다는 뜻이기도 합니다. 이렇게 말하면 모두의 기억과 이해에 도움이 됩니다.
코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>위 코드에서 배경 이미지는 컨테이너를 최소한으로 완전히 덮을 수 있습니다. 배경 이미지와 컨테이너의 가로 세로 비율이 다를 경우에는 필연적으로 가로 또는 세로 방향으로 나타납니다. 컨테이너를 초과하면 초과된 부분이 숨겨집니다.
1.contain 속성:
이 속성 값은 배경 이미지를 확대하거나 축소할 수 있습니다.
Cover 속성과 유사하게 이미지를 같은 비율로 확대하거나 축소할 수 있지만, Cover는 용기를 최소한으로 덮는 반면, contain은 용기가 세로, 가로 등 특정 방향으로만 덮어야 합니다. 컨테이너 적용 범위를 최소화할 수 있습니다.
코드 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:contain;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>위 코드에서는 배경 이미지의 크기가 비례적으로 조정되었습니다. 세로 방향으로 먼저 채우기 컨테이너 요소에 도달할 수 있기 때문입니다. 수평 방향.
다음 섹션