A background-clip tulajdonság

A background-clip tulajdonság meghatározza, hogy a háttérszín vagy a háttérkép hogyan helyezkedik el az elemhez képest: a szegély alatt, csak a padding területén belül, vagy csak a tartalom felett.

Jellemzők

• Ha border-box-ot használunk átlátszó szegélyekkel, a háttér látható lesz alattuk
• A text érték vendor prefixeket igényel a teljes támadottsághoz
• A tulajdonság gradientekkel és többszörös hátterekkel is működik
• border-radius esetén a háttér a lekerekített sarkok mentén vágódik le

Böngésző támogatottság

Minden modern böngésző támogatja a border-box, padding-box és content-box értékeket. A text értékhez -webkit- prefix szükséges, és a Chrome, Safari, Edge böngészőkben támogatott.

Szintaxis

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

Értékek

Alapértelmezett érték: border-box.

Példa . border-box érték

A háttér az áttetsző szegély alá nyúlik:

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;
}

Результат:

Példa . padding-box érték

A háttér nem nyúlik a szegély alá:

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;
}

Результат:

Példa . content-box érték

A háttér nem nyúlik a padding területére:

html<div id="elem">
  text text text text text
  text text text text text
  text text text text text
</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;
}

Результат:

Példa . text érték

A háttér a szöveg mentén van levágva (-webkit-text-fill-color transparent értékre állítása szükséges):

html<div id="elem">text text text</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;
}

Результат:

Lásd még