CSS文字背景指定颜色代码

使用预定义的颜色名称或RGB,HEX,HSL,RGBA,HSLA值指定文字颜色。

CSS颜色名称

效果

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

代码:

<p style="background-color:Tomato;">Tomato</p>
<p style="background-color:Orange;">Orange</p>
<p style="background-color:DodgerBlue;">DodgerBlue</p>
<p style="background-color:MediumSeaGreen;">MediumSeaGreen</p>
<p style="background-color:Gray;">Gray</p>
<p style="background-color:SlateBlue;">SlateBlue</p>
<p style="background-color:Violet;">Violet</p>
<p style="background-color:LightGray;">LightGray</p>

CSS背景颜色

效果

欢迎光临暮城博客

暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台

代码

<p style="background-color:DodgerBlue;">欢迎光临暮城博客</p>
<p style="background-color:Tomato;">暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台。</p>

CSS文字颜色

效果

欢迎光临暮城博客

暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台。

暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台。

代码

<p style="color:Tomato;">欢迎光临暮城博客</p>

<p style="color:DodgerBlue;">暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台。</p>

<p style="color:MediumSeaGreen;">U暮城博客:一个关注技术资源分享、关注用户体验、超实用的IT技术和设计资源分享平台。</p>

CSS边框颜色

效果

暮城博客

暮城博客

暮城博客

代码

<p style="border:2px solid Tomato;">暮城博客</p>

<p style="border:2px solid DodgerBlue;">暮城博客</p>

<p style="border:2px solid Violet;">暮城博客</p>

CSS颜色值

效果

与颜色名称“Tomato”相同:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

与颜色名称“Tomato”相同,但透明度为50%:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

代码

<p style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</p>
<p style="background-color:#ff6347;">#ff6347</p>
<p style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</p>

与颜色名称“Tomato”相同,但透明度为50%:
<p style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</p>
<p style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</p>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇