{"id":930,"date":"2021-06-05T16:48:56","date_gmt":"2021-06-05T07:48:56","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=930"},"modified":"2021-06-11T02:16:20","modified_gmt":"2021-06-10T17:16:20","slug":"ailwindcss%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88%e8%a7%a3%e8%aa%acbackground","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=930","title":{"rendered":"ailwindcss\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8\u89e3\u8aac(Background)"},"content":{"rendered":"\n

Background Attachment<\/h2>\n\n\n\n

Fixed<\/h3>\n\n\n\n

Local<\/strong><\/h3>\n\n\n\n

\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u306b\u3088\u3063\u3066\u80cc\u666f\u753b\u50cf\u3082\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

Scroll<\/strong><\/h3>\n\n\n\n

\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u80cc\u666f\u753b\u50cf\u306f\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u308c\u306a\u3044\u3002<\/p>\n\n\n\n

Class<\/th>Properties<\/th><\/tr><\/thead>
bg-fixed<\/td>background-attachment: fixed;<\/td><\/tr>
bg-local<\/td>background-attachment: local;<\/td><\/tr>
bg-scroll<\/td>background-attachment: scroll;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Background Clip<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<div class="bg-clip-border p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"><\/div>\n<div class="bg-clip-padding p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"><\/div>\n<div class="bg-clip-content p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"><\/div><\/code><\/pre><\/div>\n\n\n\n
Background Color<\/h2>\n\n\n\n
\u80cc\u666f\u8272\u306e\u8a2d\u5b9a<\/p>\n\n\n\n
button class="bg-blue-500 ...">Button<\/button><\/code><\/pre><\/div>\n\n\n\n
Background Opacity<\/h2>\n\n\n\n
\u80cc\u666f\u8272\u306e\u4e0d\u900f\u660e\u5ea6<\/p>\n\n\n\n
<div class="bg-blue-500 bg-opacity-100"><\/div>\n<div class="bg-blue-500 bg-opacity-75"><\/div>\n<div class="bg-blue-500 bg-opacity-50"><\/div>\n<div class="bg-blue-500 bg-opacity-25"><\/div>\n<div class="bg-blue-500 bg-opacity-0"><\/div><\/code><\/pre><\/div>\n\n\n\n
Class<\/th>Properties<\/th><\/tr><\/thead>
bg-opacity-0<\/td>–tw-bg-opacity: 0;<\/td><\/tr>
<\/td><\/td><\/tr>
bg-scroll<\/td>background-attachment: scroll;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Background Position<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<div class="bg-no-repeat bg-left-top bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-top bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-right-top bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-left bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-center bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-right bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-left-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div>\n<div class="bg-no-repeat bg-right-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"><\/div><\/code><\/pre><\/div>\n\n\n\n
Class<\/th>Properties<\/th><\/tr><\/thead>
bg-bottom<\/td>background-position: bottom;<\/td><\/tr>
<\/td><\/td><\/tr>
bg-scroll<\/td>background-attachment: scroll;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Background Repeat<\/h2>\n\n\n\n
Repeat<\/h3>\n\n\n\n
\u80cc\u666f\u753b\u50cf\u3092\u5782\u76f4\u65b9\u5411\u3068\u6c34\u5e73\u65b9\u5411\u306e\u4e21\u65b9\u306b\u7e70\u308a\u8fd4\u3059<\/p>\n\n\n\n
No Repeat<\/h3>\n\n\n\n
\u7e70\u308a\u8fd4\u3055\u306a\u3044<\/p>\n\n\n\n
Repeat Horizontally<\/h3>\n\n\n\n
\u80cc\u666f\u753b\u50cf\u3092\u6c34\u5e73\u65b9\u5411\u306b\u306e\u307f\u7e70\u308a\u8fd4\u3059<\/p>\n\n\n\n
Repeat Vertically<\/h3>\n\n\n\n
\u80cc\u666f\u753b\u50cf\u3092\u5782\u76f4\u65b9\u5411\u306b\u306e\u307f\u7e70\u308a\u8fd4\u3059<\/p>\n\n\n\n
<\/p>\n\n\n\n
Class<\/th>Properties<\/th><\/tr><\/thead>
.bg-repeat<\/td>background-repeat: repeat;<\/td><\/tr>
<\/td><\/td><\/tr>
bg-scroll<\/td>background-attachment: scroll;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Background Size<\/h2>\n\n\n\n
Auto<\/h3>\n\n\n\n
\u80cc\u666f\u753b\u50cf\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307e<\/p>\n\n\n\n
<div class="bg-auto bg-center ..." style="background-image: url(...)"><\/div><\/code><\/pre><\/div>\n\n\n\n
Cover<\/h3>\n\n\n\n
\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306e\u3044\u3063\u3071\u3044\u306b\u62e1\u5927\u7e2e\u5c0f\u3059\u308b<\/p>\n\n\n\n
<div class="bg-cover bg-center ..." style="background-image: url(...)"><\/div><\/code><\/pre><\/div>\n\n\n\n
Contain<\/h3>\n\n\n\n
<\/p>\n\n\n\n
<div class="bg-contain bg-center ..." style="background-image: url(...)"><\/div><\/code><\/pre><\/div>\n\n\n\n
Background Image<\/h2>\n\n\n\n
Gradient Color Stops<\/h2>\n\n\n\n

Starting color<\/h3>\n\n\n\n
\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u59cb\u8272\u3092\u8a2d\u5b9a<\/p>\n\n\n\n
<div class="h-24 bg-gradient-to-r from-red-500"><\/div><\/code><\/pre><\/div>\n\n\n\n

Ending color<\/h3>\n\n\n\n
\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u7d42\u4e86\u8272\u3092\u8a2d\u5b9a<\/p>\n\n\n\n
<div class="h-24 bg-gradient-to-r from-teal-400 to-blue-500"><\/div><\/code><\/pre><\/div>\n\n\n\n

Middle color<\/h3>\n\n\n\n
\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306b\u4e2d\u9593\u8272\u3092\u8a2d\u5b9a<\/p>\n\n\n\n
<div class="h-24 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"><\/div><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Background Attachment Fixed Local \u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u306b\u3088\u3063\u3066\u80cc\u666f\u753b\u50cf\u3082\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u307e\u3059\u3002 Scroll \u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u80cc\u666f\u753b\u50cf\u306f\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u308c\u306a\u3044\u3002 Class P<\/p>\n","protected":false},"author":1,"featured_media":931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwindcss"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=930"}],"version-history":[{"count":2,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/930\/revisions"}],"predecessor-version":[{"id":968,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/930\/revisions\/968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/931"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}