{"id":6431,"date":"2022-03-16T17:21:17","date_gmt":"2022-03-16T09:21:17","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6431"},"modified":"2022-03-22T16:52:54","modified_gmt":"2022-03-22T08:52:54","slug":"css-functions-hsl-hsla","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/16\/css-functions-hsl-hsla\/","title":{"rendered":"\u984f\u8272\u5c6c\u6027\u5b9a\u7fa9 hsl() &#038; rgb()"},"content":{"rendered":"\n<p><strong>\u984f\u8272\u5b9a\u7fa9<\/strong> \u21e2 hsl() &amp; rgb()<br><strong>\u984f\u8272\u8207\u900f\u660e\u5ea6\u5b9a\u7fa9<\/strong> \u21e2 hsla() &amp; rgba()<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">hsl() HSL Value<\/h3>\n\n\n\n<p>hsl(hue, saturation, lightness)<br>hsl(\u8272\u76f8\u3001\u98fd\u548c\u5ea6\u3001\u660e\u5ea6)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">hsl(100, 100%, 50%) \/* #5f0 *\/\nhsl(235, 100%, 50%, .5) \/* #0015ff with 50% opacity *\/\nhsl(235 100% 50%) \/* CSS Colors 4 space-separated values *\/\nhsl(235 100% 50% \/ .5); \/* #0015ff with 50% opacity, using CSS Colors 4 space-separated values *\/<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">hsla() HSLA Value<\/h3>\n\n\n\n<p>hsla(hue, saturation, lightness, alpha)<br>hsl(\u8272\u76f8\u3001\u98fd\u548c\u5ea6\u3001\u660e\u5ea6\u3001\u900f\u660e\u5ea6)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">hsla(9, 100%, 64%, 0.5)<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">rgb() RGB Value<\/h3>\n\n\n\n<p>rgb(red, green, blue) <br>\u4e09\u539f\u8272\u7d44\u6210\u51fd\u6578\uff0c\u4ee50~255 \u6216 0%~255% \u6a19\u793a\u984f\u8272\u6578\u503c\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#p1 {background-color:rgb(255,0,0);} \/* Red *\/\n#p2 {background-color:rgb(0,255,0);} \/* Green *\/\n#p3 {background-color:rgb(0,0,255);} \/* Blue *\/\n#p4 {background-color:rgb(192,192,192);} \/* Grey *\/\n#p5 {background-color:rgb(255,255,0);} \/* Yellow *\/\n#p6 {background-color:rgb(255,0,255);} \/* Cerise *\/<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">rgba() RGBA Value<\/h3>\n\n\n\n<p>rgba(red, green, blue, alpha)<br>\u5b9a\u7fa9\u984f\u8272\u900f\u660e\u5ea6\uff0calpha 0.0(\u5b8c\u5168\u900f\u660e)~1.0(\u5b8c\u5168\u4e0d\u900f\u660e)\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#p1 {background-color:rgb(255,0,0);} \/* Red *\/\n#p2 {background-color:rgb(0,255,0);} \/* Green *\/\n#p3 {background-color:rgb(0,0,255);} \/* Blue *\/\n#p4 {background-color:rgb(192,192,192);} \/* Grey *\/\n#p5 {background-color:rgb(255,255,0);} \/* Yellow *\/\n#p6 {background-color:rgb(255,0,255);} \/* Cerise *\/<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u984f\u8272\u5b9a\u7fa9 \u21e2 hsl() &amp; rgb()\u984f\u8272\u8207\u900f\u660e\u5ea6\u5b9a\u7fa9 \u21e2 hsla() &amp; rgba() &#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,53,4],"tags":[],"class_list":["post-6431","post","type-post","status-publish","format-standard","hentry","category-css","category-css-functions","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6431"}],"version-history":[{"count":63,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6431\/revisions"}],"predecessor-version":[{"id":7047,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6431\/revisions\/7047"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6431"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}