Как да използвате точки на прекъсване и медийни заявки с фонов клип в Tailwind

Kak Da Izpolzvate Tocki Na Prek Svane I Medijni Zaavki S Fonov Klip V Tailwind



Докато създава различни секции в уеб страница, може да има сценарии, при които програмистът трябва да изреже фона или да го промени, за да натрупа съдържанието. Тази методология помага при ефективното управление на добавеното съдържание, както и при оформянето на различни секции на страницата.

Този блог разработва следните основни концепции:

Как да използвате/използвате точки на прекъсване и медийни заявки с фонов клип в Tailwind?

„ bg-clip-{ключова дума} ” помощната програма се използва за задаване на ограничаващата рамка на фона на елемента. Тази помощна програма може да се използва с множество свойства, като например „ подложка-кутия ', ' гранична кутия ', ' кутия за съдържание ', и ' текстово поле ”.





Пример 1: Прилагане на точки на прекъсване с фонов клип в Tailwind

Този пример прилага точките на прекъсване с фоновия клип чрез приложеното „ bg-clip-{ключова дума} ' помощна програма с ' md ”, т.е. средно големи екрани и „ lg ”, т.е. класове екрани с голям размер:




< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< сценарий src = 'https://cdn.tailwindcss.com' >< / сценарий >
< / глава >
< тяло >
< текстово поле клас = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > Това е Tailwind CSS < / текстово поле >
< / тяло >
< / html >

Според тези кодови редове:



  • Първо, посочете CDN пътя, за да използвате функционалностите на Tailwind.
  • След това направете елемент „