background-clip հատկությունը

background-clip հատկությունը սահմանում է, թե ինչպես ֆոնային լցումը կամ ֆոնային նկարը կտեղադրվի տարրի նկատմամբ. եզրագծի տակ, միայն padding-ի ներսում կամ միայն բովանդակության վրա:

Առանձնահատկություններ

• border-box օգտագործելիս թափանցիկ եզրագծերով ֆոնը տեսանելի կլինի դրանց տակ
• text արժեքը պահանջում է վենդորային նախածանցներ լրիվ աջակցության համար
• Հատկությունը աշխատում է գրադիենտների և բազմաթիվ ֆոների հետ
• border-radius-ի դեպքում ֆոնը կտրվում է ըստ կլորացված անկյունների

Դիտարկիչների աջակցություն

Բոլոր ժամանակակից դիտարկիչները աջակցում են border-box, padding-box և content-box արժեքները: text արժեքը պահանջում է -webkit- նախածանց և աջակցվում է Chrome-ում, Safari-ում, Edge-ում:

Շարահյուսություն

cssընտրիչ {
  background-clip: border-box | padding-box | content-box | text;
}

Արժեքներ

Լռելյայն արժեքը՝ border-box:

Օրինակ . border-box արժեք

Ֆոնը մտնում է կիսաթափանցիկ եզրագծի տակ.

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

Результат:

Օրինակ . padding-box արժեք

Ֆոնը չի մտնում եզրագծի տակ.

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

Результат:

Օրինակ . content-box արժեք

Ֆոնը չի մտնում padding-ի վրա.

html<div id="elem">
  տեքստ տեքստ տեքստ տեքստ տեքստ
  տեքստ տեքստ տեքստ տեքստ տեքստ
  տեքստ տեքստ տեքստ տեքստ տեքստ
</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;
}

Результат:

Օրինակ . text արժեք

Ֆոնը կտրվում է ըստ տեքստի (պահանջվում է -webkit-text-fill-color transparent արժեքով).

html<div id="elem">տեքստ տեքստ տեքստ</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;
}

Результат:

Տես նաև