Уласцівасць background-size
Уласцівасць background-size
задае памер
выявы фону. Значэннем уласцівасці служаць
любыя адзінкі вымярэння
для памераў, альбо ключавыя словы auto
,
cover
ці contain
.
Сінтаксіс
селектар {
background-size: значэнне;
}
Ключавыя словы
Значэнне | Апісанне |
---|---|
auto |
Фон будзе мець натуральны памер, такі,
як рэальны памер выявы фону.
Калі ж auto зададзена толькі для адной стараны,
то па гэтай старане фон будзе маштабавацца так,
каб мець незапярэчаныя прапорцыі.
|
cover |
Маштабуе выяву так, каб яна накрыла сабой увесь блок з захаваннем прапорцый. Выява будзе старацца змясціцца цалкам, але гэта не заўсёды будзе атрымлівацца, таму нейкая яе частка будзе абрэзацца. Блок заўсёды будзе пакрыты выявай цалкам. |
contain |
Маштабуе выяву так, каб яна цалкам улязе ў блок з захаваннем прапорцый. Пры гэтым яна можа заняць альбо ўсю шырыню, альбо ўсю вышыню (залежыць ад прапорцый выявы і ад памераў элемента). Блок у агульным выпадку будзе пакрыты выявай не цалкам (затое выява заўсёды будзе бачная ўся, хоць і ў паменшаным варыянце). |
Значэнне па змаўчанні: auto
.
Выкарыстанне
Адзінкі вымярэння для памераў і auto
могуць быць выкарыстаны
ў розных камбінацыях, напрыклад, так: auto 20px
,
ці 30% 20px
, ці auto 30%
і гэтак далей.
У гэтым выпадку першы параметр задае памер
фону па шырыні, а другі параметр - памер
фону па вышыні. Калі указаны адзін параметр - то ён
будзе задаваць памер фону і па шырыні,
і па вышыні адначасова.
Прыклад
Зараз фоновая выява будзе мець свой натуральны памер:
<div id="elem"></div>
#elem {
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 550px;
height: 400px;
}
:
Прыклад
Зараз фоновая выява будзе памерам 300px
на 400px
(у нашым выпадку прапорцыі
выявы скажаюцца):
<div id="elem"></div>
#elem {
background-size: 300px 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Прыклад
Зараз фоновая выява будзе памерам 400px
на 400px
(у нашым выпадку прапорцыі
выявы скажаюцца):
<div id="elem"></div>
#elem {
background-size: 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Прыклад
Зараз фоновая выява будзе памерам 400px
па гарызанталі, а па вертыкалі яе памер
падстройцца так, каб прапорцыі не сказіліся:
<div id="elem"></div>
#elem {
background-size: 400px auto;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Прыклад
Зараз фоновая выява будзе памерам 400px
па вертыкалі, а па гарызанталі яе памер
падстройцца так, каб прапорцыі не сказіліся:
<div id="elem"></div>
#elem {
background-size: auto 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Прыклад . Значэнне contain
Паглядзіце на працу значэння contain
:
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: contain;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Прыклад . Значэнне cover
Паглядзіце на працу значэння cover
:
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Прыклад . Палепсім працу cover
Працу значэння cover
можна палепшыць,
калі адцэнтраваць выяву з дапамогай уласцівасці
background-position
(у нашым выпадку на бачныя часткі пачнуць трапляць
галовы коней, а не іх задачы):
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Глядзіце таксама
-
уласцівасць
background
,
якая з'яўляецца ўласцівасцю-скарачэннем для фону