Sifa ya background-clip

Sifa background-clip inaainisha jinsi ujazaji wa rangi wa msingi au picha ya msingi itakavyowekwa kuhusiana na kipengele: chini ya mpaka, ndani tu ya padding au juu tu ya maudhui.

Vipengele Maalum

Wakati wa kutumia border-box na mipaka yenye uwazi, msingi utaonekana chini yao
Thamani text inahitaji viambishi awali vya wauzaji (vendor prefixes) kwa usaidizi kamili
Sifa hii inafanya kazi na mikunjo ya rangi (gradients) na misingi mbalimbali
Kwa border-radius, msingi hukatwa kulingana na pembe zilizozungushwa

Usaidizi wa Vivinjari

Vivinjari vyote vya kisasa vinasaidia border-box, padding-box na content-box. Thamani text inahitaji kiambishi awali -webkit- na inasaidiwa na Chrome, Safari, Edge.

Sintaksia

csskichaguzi {
  background-clip: border-box | padding-box | content-box | text;
}

Thamani

Thamani	Maelezo
`border-box`	Msingi huelezwa hadi ukingo wa nje wa mpaka (chini ya mpaka).
`padding-box`	Msingi hukatwa kwenye ukingo wa ndani wa mpaka (hauingii chini ya `border`).
`content-box`	Msingi huonyeshwa tu juu ya maudhui (hukatwa `padding`).
`text`	Msingi hukatwa kulingana na maandishi.

Thamani chaguomsingi: border-box.

Mfano . Thamani border-box

Msingi unaingia chini ya mpaka wenye uwazi wa kiasi:

html<div id="elem"></div>

css#elem {
  background-clip: border-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Mfano . Thamani padding-box

Msingi hauingii chini ya mpaka:

html<div id="elem"></div>

css#elem {
  background-clip: padding-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.5);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Mfano . Thamani content-box

Msingi hauingii kwenye padding:

html<div id="elem">
  maandishi maandishi maandishi maandishi maandishi
  maandishi maandishi maandishi maandishi maandishi
  maandishi maandishi maandishi maandishi maandishi
</div>

css#elem {
  background-clip: content-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Mfano . Thamani text

Msingi hukatwa kulingana na maandishi (inahitajika -webkit-text-fill-color kwa thamani transparent):

html<div id="elem">maandishi maandishi maandishi</div>

css#elem {
  display: inline-block;
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  font-size: 40px;
  font-weight: bold;
}

Результат:

Angalia Pia

sifa background,
inayowakilisha sifa iliyofupishwa kwa msingi
sifa background-origin,
inayoainisha nafasi ya asili ya msingi