前端入門-css顏色和背景

言

如果網(wǎng)頁只有一種顏色，那是非?？膳碌模伾脑O(shè)置豐富了網(wǎng)頁，就如同多彩繽紛的世界。

在了解css顏色之前，我們回顧下計(jì)算機(jī)是如何顯示顏色的？計(jì)算機(jī)根據(jù)色光三原色的原理通過各種算法來顯示顏色。

css 顏色 —— color

網(wǎng)頁中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫法都是指同一個(gè)顏色（紅色）：

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

對(duì)于16進(jìn)制形式，每2位表示一個(gè)顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/

對(duì)于rgb的表示法，由三個(gè)參數(shù)組成，分別是紅、綠、藍(lán)，每種顏色取值從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); /*藍(lán)色*/

紅，綠，藍(lán)值從0到255的結(jié)合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。

但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時(shí)要格外注意，避免設(shè)置不能夠顯示的顏色，可以參考網(wǎng)頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

顏色除了有三原色紅綠藍(lán)組成，還有亮度層級(jí)，如下圖：

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

css 背景 —— background

通過background屬性可以設(shè)置元素的背景色、背景圖片，語法如下：

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

background 在一個(gè)聲明中設(shè)置所有的背景屬性，可以在這里設(shè)置如下屬性：

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

各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個(gè)值。

建議使用background 簡(jiǎn)寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當(dāng)然你也可以分開使用，比如：

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

1、背景顏色 —— background-color

background-color 和之前講的的color 一樣，可以使用16進(jìn)制、rgb、rgba等設(shè)置顏色。如下實(shí)例：

<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元素添加背景圖片，在早期網(wǎng)頁制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實(shí)例：

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

這里使用了一個(gè)125*125大小的圖片，如下：

但是你會(huì)發(fā)現(xiàn)，整個(gè)網(wǎng)頁鋪滿了圖片，上面的代碼默認(rèn)會(huì)鋪滿整個(gè)頁面從左到右，從上到下。如果不想被平鋪，可以使用background-repeat 設(shè)置。

背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片，如下：

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

多個(gè)圖像以逗號(hào)隔開，在頁面中多個(gè)圖片會(huì)疊加顯示，第一張圖片顯示在最頂端。

如下效果：

3、背景重復(fù)方式 —— background-repeat

它有如下幾個(gè)屬性：

repeat	默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x	背景圖像將在水平方向重復(fù)。
repeat-y	背景圖像將在垂直方向重復(fù)。
no-repeat	背景圖像不重復(fù)。
inherit	從父元素繼承 background-repeat 屬性的設(shè)置。

實(shí)例如下：

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

背景圖片默認(rèn)顯示在左上角，語法如下：

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

如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長(zhǎng)度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。

x 可以取值百分比| 數(shù)值| left | center | right。

y 可以取值百分比| 數(shù)值| top| center | bottom。

當(dāng)只設(shè)置一個(gè)值的時(shí)候，另一個(gè)會(huì)缺省為 center。

使用關(guān)鍵字，將背景圖片水平居中，垂直居中：

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，顯示效果和上圖一樣。

還可以使用具體數(shù)值，比如 px、em、cm等。

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

顯示效果如下：

5、背景圖相對(duì)于容器的基準(zhǔn)點(diǎn) —— background-origin

就是設(shè)置背景圖片相對(duì)于html元素什么位置作為初始坐標(biāo)點(diǎn)，語法：

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

幾種值得含義：

padding-box	背景圖像相對(duì)填充框的位置
border-box	背景圖像相對(duì)邊界框的位置
content-box	背景圖像相對(duì)內(nèi)容框的位置

如下實(shí)例：

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

默認(rèn)會(huì)顯示背景圖原始尺寸，可以通過此屬性設(shè)置背景圖片在元素上的大小，語法：

background-size: width height;

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

數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。

百分比%：相對(duì)于其所在html原始寬度和高度，如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。

cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

如下示例：

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

background-attachment 屬性有以下幾個(gè)值：

scroll	背景圖片隨頁面的其余部分滾動(dòng)。這是默認(rèn)
fixed	背景圖像是固定的
inherit	指定background-attachment的設(shè)置應(yīng)該從父元素繼承
local	背景圖片隨滾動(dòng)元素滾動(dòng)

如設(shè)置一個(gè)固定的背景圖片，不跟隨頁面滾動(dòng)：

background-attachment:fixed;

滾動(dòng)滾動(dòng)條，會(huì)發(fā)下背景圖片始終固定在屏幕那個(gè)位置。

8、背景繪制區(qū)域 —— background-clip

語法如下：

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

border-box	默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。
padding-box	背景繪制在襯距方框內(nèi)（剪切成襯距方框）。
content-box	背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。

這個(gè)屬性類似于 background-origin ，只不過它會(huì)裁剪背景圖片，如下示例：

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

所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合，語法：

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

屬性值：

示例如下：

正常模式

luminosity 亮度模式

color 顏色模式

其它模式可以自己試試，看下有什么區(qū)別。

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

一般建議使用 background 簡(jiǎn)寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯(cuò)誤，并補(bǔ)充。

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

景樣式

1.背景屬性縮寫

Background: 背景色背景圖片背景平鋪方式背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

縮寫后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸樣式

1.寬度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

邊框樣式

1.邊框線

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 設(shè)置上邊框線

border-bottom-style 設(shè)置下邊框線

border-left-style 設(shè)置左邊框線

border-right-style 設(shè)置右邊框線

2.邊框?qū)挾?/p>

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

border-top-width 設(shè)置上邊框?qū)挾?/p>

border-bottom-width 設(shè)置下邊框?qū)挾?/p>

border-left-width 設(shè)置左邊框?qū)挾?/p>

border-right-width 設(shè)置右邊框?qū)挾?/p>

3.邊框顏色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

border-top-color 設(shè)置上邊框顏色

border-bottom-color 設(shè)置下邊框顏色

border-left-color 設(shè)置左邊框顏色

border-right-color 設(shè)置右邊框顏色

4.邊框樣式縮寫

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

縮寫后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外邊距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 設(shè)置上邊的外邊距

margin-bottom 設(shè)置下邊的外邊距

margin-left設(shè)置左邊的外邊距

margin-right設(shè)置右邊的外邊距

縮寫型式：

margin: 上邊距右邊距下邊距左邊距

margin: 上下邊距左右邊距

margin: 上邊距左右邊距下邊距

內(nèi)邊距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 設(shè)置上邊的內(nèi)邊距

padding-bottom 設(shè)置下邊的內(nèi)邊距

padding-left設(shè)置左邊的內(nèi)邊距

padding-right設(shè)置右邊的內(nèi)邊距

縮寫型式：

padding: 上邊距右邊距下邊距左邊距

padding : 上下邊距左右邊距

padding : 上邊距左右邊距下邊距

列表樣式

1.項(xiàng)目符號(hào)

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*實(shí)心圓*/

ul { list-style-type:circle;}/*空心圓*/

ul { list-style-type:square;}/*實(shí)心方塊*/

ul { list-style-type:none;}/*不顯示項(xiàng)目符號(hào)*/

ol { list-style-type:decimal;}/*阿拉伯?dāng)?shù)字*/

ol { list-style-type:lower-roman;}/*小寫羅馬數(shù)字*/

ol { list-style-type:upper-alpha;}/*大寫英文字母*/

2.自定義項(xiàng)目符號(hào)

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

鏈接樣式

1.鏈接沒有被訪問時(shí)的樣式

a:link

例： a:link { color:#ff0000; }

2.鏈接被訪問后的樣式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠標(biāo)懸停在鏈接上的樣式

a:hover

例： a:link { background-color:#ccc; }

4.鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式

a:active

例：a:active { background-color:#ff0000;}

ackground-clip 屬性

規(guī)定背景的繪制區(qū)域：

border-box 背景被裁剪到邊框盒。

padding-box 背景被裁剪到內(nèi)邊距框。

content-box 背景被裁剪到內(nèi)容框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    padding: 50px;
    border: 50px solid rgba(255,0,0,0.5);

    background-image: url(img/yangmi.jpg);

    /*規(guī)定背景的繪制區(qū)域：*/
    /*background-clip: border-box;*//*背景會(huì)填充到邊框*/

    /*background-clip: padding-box;*/

    background-clip: content-box;

}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>

background-size 屬性

background-size: length|percentage|cover|contain;

length 設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

percentage 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

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

contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

在線咨詢

上一篇：如何在Word中批量添加填空題的下劃線？
下一篇：前端入門-html 表單控件使用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端入門-css顏色和背景

言

css 顏色 —— color

css 背景 —— background

您的項(xiàng)目需求