整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
片
當(dāng)我們?cè)谥谱黜撁娴臅r(shí)候，通常會(huì)遇到圖片的三種表現(xiàn)形式，如下：
1、內(nèi)容圖片
內(nèi)容圖片是頁面中真正的內(nèi)容，沒有內(nèi)容圖片，就無法完整的理解頁面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁的一部分，它們能幫助你決定這個(gè)頁面的內(nèi)容是否是你需要的。
內(nèi)容圖片
2、布局圖片
布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個(gè)圖片，沒有這個(gè)圖片也能理解頁面上文字描述的內(nèi)容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會(huì)給你瀏覽頁面的時(shí)候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產(chǎn)品，箭頭圖片點(diǎn)擊可以看到更詳細(xì)的產(chǎn)品等。
交互圖片
在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。
<img src="" alt="">
內(nèi)容圖片
布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設(shè)置背景圖片時(shí)，要始終設(shè)置背景顏色，確保背景圖片沒有成功時(shí)會(huì)顯示一個(gè)背景顏色
2）background-image 可以指向一個(gè)相對(duì)路徑或者絕對(duì)路徑來添加圖片。
3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個(gè)關(guān)鍵字：
4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個(gè)關(guān)鍵字，如：
background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個(gè)關(guān)鍵字可以是top、center、bottom，第二個(gè)關(guān)鍵字可以是left、center、right
CSS中和背景相關(guān)的屬性可以簡寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復(fù)雜圖像
2）png最適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
3）gif適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
建議：
一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個(gè)文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：
交互圖片
交互圖片
具體如何操作呢？后續(xù)教頭會(huì)通過視頻給大家詳細(xì)演示，請(qǐng)繼續(xù)關(guān)注。
這樣一個(gè)需求，就是在一個(gè)DIV中包含有一個(gè)Image標(biāo)簽，但是在Div標(biāo)簽中包含有一張背景圖片，設(shè)計(jì)圖上的樣子是這張背景圖片是有一個(gè)透明度的，但是如果直接使用opacity屬性設(shè)置的的話就會(huì)連Div中的內(nèi)容的透明度也會(huì)受到影響，那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢？，可以通過以下幾種方法實(shí)現(xiàn)。
這是在日常開發(fā)中被推薦使用的方法，通過這種方式實(shí)現(xiàn)不會(huì)影響到div中的其他內(nèi)容的透明度只會(huì)影響它自己背景的透明度，詳細(xì)實(shí)現(xiàn)如下。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.container::before {
content: "";
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5; /* 調(diào)整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內(nèi)容
</div>
</div>
</body>
</html>這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時(shí)候，結(jié)果實(shí)在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實(shí)現(xiàn)起來要簡單很多。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>這種方式實(shí)現(xiàn)會(huì)影響到整個(gè)的div的樣式，也就是說頁面中的內(nèi)容的透明度也會(huì)受到影響，并且這種影響不會(huì)被其他樣式所改變。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
filter: opacity(0.5); /* 調(diào)整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>以上就是實(shí)現(xiàn)如何調(diào)整div的背景透明度，在一些特殊場(chǎng)景中我們還可以通過JS的方式來實(shí)現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因?yàn)樗谛薷牧薲iv背景透明度之后，并不會(huì)影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對(duì)于一些單色調(diào)的內(nèi)容來講這種方式實(shí)現(xiàn)效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內(nèi)部有內(nèi)容的情況下會(huì)影響到整個(gè)組件體系的樣式。
在實(shí)際開發(fā)中，我們可以選擇合適的方式來實(shí)現(xiàn)這個(gè)需求。當(dāng)然還有其他的實(shí)現(xiàn)方式，有興趣的讀者可以留言我們一起討論。
如果網(wǎng)頁只有一種顏色，那是非常可怕的，顏色的設(shè)置豐富了網(wǎng)頁，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計(jì)算機(jī)是如何顯示顏色的？計(jì)算機(jī)根據(jù)色光三原色的原理通過各種算法來顯示顏色。
網(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è)置更加漂亮的顏色。
通過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：＃FF0000 url(img.png)是允許的，但至少有一個(gè)值。
建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當(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；或者使用長度值，如 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ū)別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習(xí)，每種屬性進(jìn)行組合使用看看其效果。
一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯(cuò)誤，并補(bǔ)充。
上篇：前端入門——css鏈接樣式
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
