Цлип-бацкгроунд - ЦСС-трикови

Anonim

background-clip вам омогућава да контролишете колико се позадинска слика или боја протеже даље од подлоге или садржаја елемента.

.frame ( background-clip: padding-box; )

Вредности

  • border-boxје подразумевана вредност. Ово омогућава да се позадина протеже све до спољне ивице границе елемента.
  • padding-box исече позадину на спољној ивици облоге елемента и не дозвољава му да се протеже у обруб.
  • content-boxисече позадину на ивици оквира са садржајем.
  • inheritпримењује background-clipпоставку родитеља на изабрани елемент.

Демос

background-clip најбоље је објаснити на делу, па смо саставили две демонстрације како бисмо показали како то функционише.

У првој демонстрацији, сваки див има један пасус у себи. Параграф је див садржај. Сваки див има жуту позадину и полупрозирну светлоплаву ивицу од 5 пиксела.

Погледајте клип за позадину оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Подразумевано или са background-clip: border-boxсетом, жута позадина се протеже све до спољне ивице обруба. Обратите пажњу на то како ивица изгледа као да је зелена због жуте позадине испод ње.

Када background-clipсе промени у padding-box, боја позадине се зауставља тамо где се завршава попуњавање елемента. Приметите да је ивица плава јер позадина не сме да процури у ивицу.

Са background-clip: content-box, боја позадине се примењује само на садржај див-а, у овом случају на елемент појединачног пасуса. Подлога и обруб див-а немају боју позадине. Али, постоји један мали детаљ вредан помена: боја се протеже до маргине садржаја. Погледајте разлике између првог и другог примера са content-box.

У првом content-boxпримеру, подразумеване маргине прегледача примењују се на пасус, а позадинске исечке након маргине. У другом примеру, маргина је постављена на 0 у ЦСС-у, а позадина је исечена на ивици текста.

Следећа интерактивна емисија приказује background-clipслику у позадини. Садржај у овој демонстрацији је мањи празан див.

Погледајте интерактивни пример позадине за исечак оловке Тимотхи Миллер-а (@тјацобдесигн) на ЦодеПен-у.

Ова демонстрација се такође односи background-size: coverи background-repeat: no-repeatпоред background-clipконтроле позадинске слике, која би се иначе понављала до исецања.

Текст

Постоји верзија са префиксом добављача која ради за исецање позадине у текст. Да би се то видело, текст мора бити и транспарентан. Срећом, постоји још једно својство боје текста са префиксом добављача које може ефикасно заменити color, чинећи га сигурним за употребу јер може имати резервни ефекат:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Фирефок, Цхроме и Сафари ово подржавају.

Погледајте Пен
Лит текст Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен.

Повезан

  • позадина-прилог
  • боја позадине
  • позадинска слика
  • позадина-порекло
  • позадина-положај
  • позадина-понављање
  • величина позадине

Више ресурса

  • background-clip у спецификацији ЦСС3
  • позадина-клип на МДН
  • Модел ЦСС кутије

Подршка прегледача

Прекид узбуне!

Хром Сафари Фирефок Опера ИЕ Андроид иОС
1+ 3+ 4+ 10.5+ 9+ 4.1+ Извођење радова