整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS 合法顏色值

          SS Colors

          CSS的顏色可以通過以下方法指定:

          • 十六進制顏色

          • RGB顏色

          • RGBA顏色

          • HSL色彩

          • HSLA顏色

          • 預定義/跨瀏覽器的顏色名稱


          十六進制顏色

          所有主要瀏覽器都支持十六進制顏色值。

          指定一個十六進制的顏色其組成部分是:#RRGGBB,其中RR(紅色),GG(綠色)和BB(藍色)。所有值必須介于0和FF之間。

          <p例如,#0000FF值呈現為藍色,因為藍色的組成設置為最高值(FF)而其他設置為0。

          實例

          p

          {

          background-color:#ff0000;

          }


          RGB顏色

          RGB顏色值在所有主要瀏覽器都支持。

          RGB顏色值指定:RGB(紅,綠,藍)。每個參數(紅色,綠色和藍色)定義顏色的亮度,可在0和255之間,或一個百分比值(從0%到100%)之間的整數。

          例如RGB(0,0,255)值呈現為藍色,因為藍色的參數設置為最高值(255)而其他設置為0。

          此外,下面的值定義相同的顏色:RGB(0,0,255),RGB(0%,0%,100%)。

          實例

          p

          {

          background-color:rgb(255,0,0);

          }

          嘗試一下 ?


          RGBA顏色

          RGBA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

          RGBA顏色值是RGB顏色值alpha通道的延伸 - 指定對象的透明度。

          RGBA顏色值指定:RGBA(紅,綠,藍,alpha)。 Alpha參數是一個介于0.0(完全透明)和1.0(完全不透明)之間的參數。

          實例

          p

          {

          background-color:rgba(255,0,0,0.5);

          }


          HSL顏色

          IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL顏色值。

          HSL代表色相,飽和度和亮度 - 使用色彩圓柱坐標表示。

          HSL顏色值指定:HSL(色調,飽和度,明度)。

          色相是在色輪上的程度(從0到360)-0(或360)是紅色的,120是綠色的,240是藍色的。飽和度是一個百分比值;0%意味著灰色和100%的陰影,是全彩。亮度也是一個百分點;0%是黑色的,100%是白色的。

          實例

          p

          {

          background-color:hsl(120,65%,75%);

          }

          嘗試一下 ?


          HSLA顏色

          HSLA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

          HSLA的顏色值是一個帶有alpha通道的HSL顏色值的延伸 - 指定對象的透明度。

          指定HSLA顏色值:HSLA(色調,飽和度,亮度,α),α是Alpha參數定義的不透明度。 Alpha參數是一個介于0.0(完全透明)和1.0(完全不透明)之間的參數。

          實例

          p

          {

          background-color:hsla(120,65%,75%,0.3);

          }

          嘗試一下 ?


          預定義/跨瀏覽器的顏色名稱

          147是在HTML和CSS顏色規范預定義的顏色名稱。你可以查看我們的預定義顏色名稱表。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          如果網頁只有一種顏色,那是非常可怕的,顏色的設置豐富了網頁,就如同多彩繽紛的世界。

          在了解css顏色之前,我們回顧下計算機是如何顯示顏色的?計算機根據色光三原色的原理通過各種算法來顯示顏色。

          css 顏色 —— color

          網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅,綠,藍三種顏色混合色,如下示例,幾種寫法都是指同一個顏色(紅色):

          color:red;
          color: #ff0000;
          color: rgb(255,0,0)
          color: rgba(255,0,0,1)

          對于16進制形式,每2位表示一個顏色,從左到右分別是紅、綠、藍,每種顏色取值從00 到 FF。

          如下示例:

          color: #000000; /*黑色*/
          color: #ffffff; /*白色*/
          color: #ff0000; /*紅色*/
          color: #00ff00; /*綠色*/
          color: #0000ff; /*藍色*/

          對于rgb的表示法,由三個參數組成,分別是紅、綠、藍,每種顏色取值從0 到 255。

          如下示例:

          color: rgb(0,0,0); /*黑色*/
          color: rgb(255,255,255); /*白色*/
          color: rgb(255,0,0); /*紅色*/
          color: rgb(0,255,0); /*綠色*/
          color: rgb(0,0,255); /*藍色*/

          紅,綠,藍值從0到255的結合,給出了總額超過1600多萬不同的顏色(256 × 256 ×256)。

          但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意,避免設置不能夠顯示的顏色,可以參考網頁安全色:https://www.w3school.com.cn/cssref/css_colors.asp。

          顏色除了有三原色紅綠藍組成,還有亮度層級,如下圖:

          rgba 中的a是指透明度,這個是css3新增加的屬性,通過rgba可以設置更加漂亮的顏色。

          css 背景 —— background

          通過background屬性可以設置元素的背景色、背景圖片,語法如下:

          background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

          background 在一個聲明中設置所有的背景屬性,可以在這里設置如下屬性:

          • background-color —— 背景顏色。
          • background-image —— 使用的背景圖像
          • background-position —— 背景圖像的位置
          • background-size —— 背景圖片的大小
          • background-repeat —— 如何重復背景圖像
          • background-origin —— 背景圖片的定位區域
          • background-clip —— 背景的繪制區域
          • background-attachment —— 背景圖像是否固定或者隨著頁面的其余部分滾動。

          各值之間用空格分隔,不分先后順序??梢灾挥衅渲械哪承┲担?background:#FF0000 url(img.png)是允許的,但至少有一個值。

          建議使用background 簡寫屬性,這樣可以更好地兼容較老的瀏覽器,少寫很多代碼,當然你也可以分開使用,比如:

          background-color: #ff0000;
          background-image: url(img.png);
          background-repeat: no-repeat;
          background-size: 100% auto;

          1、背景顏色 —— background-color

          background-color 和之前講的的color 一樣,可以使用16進制、rgb、rgba等設置顏色。如下實例:

          <html>
          <head>
          <style type="text/css">
          body {background-color: yellow}
          h1 {background-color: #00ff00}
          h2 {background-color: transparent}
          p {background-color: rgb(250,0,255)}
          p.no2 {background-color: gray; padding: 20px;}
          </style>
          </head>
          <body>
          <h1>背景色1</h1>
          <h2>背景色2</h2>
          <p>背景色3</p>
          <p class="no2">背景色4</p>
          </body>
          </html>

          如下圖顯示:

          注意:background-color: transparent; 指透明色,不顯示任何顏色。

          2、背景圖片的使用——background-image

          給html元素添加背景圖片,在早期網頁制作中被廣泛應用,如今已不建議大量使用。如下實例:

          body {background-image:url(/static/bg.gif);}

          這里使用了一個125*125大小的圖片,如下:

          但是你會發現,整個網頁鋪滿了圖片,上面的代碼默認會鋪滿整個頁面從左到右,從上到下 。如果不想被平鋪,可以使用background-repeat 設置。

          背景圖片同時可以設置多個背景圖片,如下:

          background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

          多個圖像以逗號隔開,在頁面中多個圖片會疊加顯示,第一張圖片顯示在最頂端。

          如下效果:

          3、背景重復方式 —— background-repeat

          它有如下幾個屬性:

          repeat

          默認。背景圖像將在垂直方向和水平方向重復。

          repeat-x

          背景圖像將在水平方向重復。

          repeat-y

          背景圖像將在垂直方向重復。

          no-repeat

          背景圖像不重復。

          inherit

          從父元素繼承 background-repeat 屬性的設置。

          實例如下:

          4、背景圖的位置 —— background-position

          背景圖片默認顯示在左上角,語法如下:

          background-position: x y; // x 距離左邊距離,y距離頂部距離

          如果要改變它的位置,可以使用關鍵字:top、bottom、left、right 和 center;或者使用長度值,如 100px 或 5cm;也可以使用百分數值。

          x 可以取值 百分比| 數值| left | center | right。

          y 可以取值 百分比| 數值| top| center | bottom。

          當只設置一個值的時候,另一個會缺省為 center。

          使用關鍵字,將背景圖片水平居中,垂直居中:

          background-image:url('/statics/images/course/smiley.gif');
          background-repeat:no-repeat;
          background-attachment:fixed;
          background-position:center; 

          使用百分比%:

          background-image:url('/statics/images/course/smiley.gif');
          background-repeat:no-repeat;
          background-attachment:fixed;
          background-position: 50% 50%; 

          50% 50% 等同于 center center,顯示效果和上圖一樣。

          還可以使用具體數值,比如 px、em、cm等。

          background-image:url('/statics/images/course/smiley.gif');
          background-repeat:no-repeat;
          background-attachment:fixed;
          background-position: 50px 50px; 

          顯示效果如下:

          5、背景圖相對于容器的基準點 —— background-origin

          就是設置背景圖片相對于html元素什么位置作為初始坐標點,語法:

          background-origin: padding-box|border-box|content-box;

          幾種值得含義:

          padding-box

          背景圖像相對填充框的位置

          border-box

          背景圖像相對邊界框的位置

          content-box

          背景圖像相對內容框的位置

          如下實例:

          6、背景圖片大小 —— background-size

          默認會顯示背景圖原始尺寸,可以通過此屬性設置背景圖片在元素上的大小,語法:

          background-size: width height;

          寬度和高度可以使用 數值、百分比%、cover 及 contain ;

          數值:可以使用任何單位的數字,比如 px、em、cm等。如果設置一個值,第二個為"auto(自動)"。

          百分比%:相對于其所在html原始寬度和高度,如果設置一個值,第二個為"auto(自動)"。

          cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

          contain:把背景圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

          如下示例:

          7、背景圖像是否固定或者隨著頁面的其余部分滾動

          background-attachment 屬性有以下幾個值:

          scroll

          背景圖片隨頁面的其余部分滾動。這是默認

          fixed

          背景圖像是固定的

          inherit

          指定background-attachment的設置應該從父元素繼承

          local

          背景圖片隨滾動元素滾動

          如設置一個固定的背景圖片,不跟隨頁面滾動:

          background-attachment:fixed;

          滾動滾動條,會發下背景圖片始終固定在屏幕那個位置。

          8、背景繪制區域 —— background-clip

          語法如下:

          background-clip: border-box|padding-box|content-box;

          border-box

          默認值。背景繪制在邊框方框內(剪切成邊框方框)。

          padding-box

          背景繪制在襯距方框內(剪切成襯距方框)。

          content-box

          背景繪制在內容方框內(剪切成內容方框)。

          這個屬性類似于 background-origin ,只不過它會裁剪背景圖片,如下示例:

          9、背景層的混合模式 —— background-blend-mode

          所謂混合模式就是將圖片與顏色或圖片與圖片進行混合,語法:

          background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

          屬性值:

          示例如下:

          正常模式

          luminosity 亮度模式

          color 顏色模式

          其它模式可以自己試試,看下有什么區別。

          到此,我們了解了顏色和背景的使用方法,尤其是背景的使用,由于它的屬性很多,可以簡寫也可以分開寫,要想完全掌握,還得多練習,每種屬性進行組合使用看看其效果。

          一般建議使用 background 簡寫方式,主要是可以少寫很多代碼。以上介紹難免有誤,或不齊全,歡迎指出錯誤,并補充。

          上篇:前端入門——css鏈接樣式

          頭條創作挑戰賽#

          【今日HTML小知識-2:設置顏色透明】在網頁布局中有時為了網頁的整體美觀,可能需要將網頁中的某些部分設置為背景顏色透明,那么如何設置背景顏色透明呢?本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。


          1、通過backgroud和opacity設置背景顏色透明

          background屬性中屬性值比較簡單,這里就不細說了,opacity屬性參數的"不透明度"是以數字表示,從 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是1.0,換句話說,數字越大代表元素越不透明。代碼示例如下:

          代碼

          示例效果

          注意:通過backgroud和opacity設置背景顏色透明度,如果背景上面有文字的話,那么文字也會變成透明,就像上面的效果一樣。

          2、通過rgba方式設置背景顏色透明

          所謂RGBA顏色,就是RGB三原色加ALPHA。在給背景添加顏色的同時,提供透明度特性。

          用法:background:rgba(R, G, B, A) ;

          代碼實例如下:

          代碼

          示例效果

          注意:通過rgba方式設置背景顏色透明度,可以設置背景顏色透明而文字不透明。



          以上為HTML設置背景透明色的兩種方法,希望能幫助到正在學習HTML的你們噢~~~

          新人作者,如有不足地方,希望大家多多交流,隨時補充噢~~~


          主站蜘蛛池模板: 激情综合一区二区三区| 久久精品一区二区三区日韩| 人妻无码一区二区三区| 国产一在线精品一区在线观看| 亚洲欧美日韩国产精品一区| 中文字幕一区视频一线| 国产精品一区电影| 亚洲熟女www一区二区三区| 精品国产免费一区二区三区香蕉| 波多野结衣电影区一区二区三区 | 任你躁国语自产一区在| 精品一区二区久久| 中文字幕一区二区免费| 国产不卡视频一区二区三区| 国产福利一区二区| 秋霞电影网一区二区三区| 天天躁日日躁狠狠躁一区| 亚洲日韩中文字幕无码一区| 精品不卡一区二区| 亚洲国产一区二区三区在线观看| 亚洲一区在线视频| 亚洲AV无码一区二区大桥未久| 精品国产福利一区二区| 亚洲欧美日韩一区二区三区| 成人免费视频一区二区三区| 无码少妇一区二区三区芒果| 国产婷婷色一区二区三区深爱网| 日韩一区二区在线免费观看| 精品国产一区二区三区久| 麻豆一区二区三区蜜桃免费| 国产成人综合精品一区| 久久国产精品一区| 性色AV一区二区三区| 无码人妻精品一区二区三区在线 | 日韩视频在线观看一区二区| 波多野结衣电影区一区二区三区| 大伊香蕉精品一区视频在线 | 女人18毛片a级毛片一区二区| 加勒比无码一区二区三区| 国产一区二区三区播放| 免费观看一区二区三区|