為大家介紹如何使用 CSS 來布局圖片。

圓角圖片

實例

圓角圖片:

img {

border-radius: 8px;

}

實例

橢圓形圖片:

img {

border-radius: 50%;

}

嘗試一下 ?

縮略圖

我們使用 border 屬性來創(chuàng)建縮略圖。

實例

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

}

<img src="paris.jpg" alt="Paris">

嘗試一下 ?

實例

a {

display: inline-block;

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

transition: 0.3s;

}

a:hover {

box-shadow: 0 0 2px 1px rgba

(0, 140, 186, 0.5);

}

<a href="paris.jpg">

<img src="paris.jpg" alt="Paris">

</a>

響應(yīng)式圖片

響應(yīng)式圖片會自動適配各種尺寸的屏幕。

實例中，你可以通過重置瀏覽器大小查看效果:

如果你需要自由縮放圖片，且圖片放大的尺寸不大于其原始的最大值，則可使用以下代碼：

實例

img {

max-width: 100%;

height: auto;

}

嘗試一下 ?

提示: Web 響應(yīng)式設(shè)計更多內(nèi)容可以參考 CSS 響應(yīng)式設(shè)計教程。

圖片文本

如何定位圖片文本:

實例

左下角左上角右上角右下角居中

嘗試一下:

左上角 ? 右上角 ? 左下角 ? 右下角 ? 居中 ?

卡片式圖片

實例

div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

img {width: 100%}

div.container {

text-align: center;

padding: 10px 20px;

}

圖片濾鏡

CSS filter 屬性用為元素添加可視效果 (例如：模糊與飽和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。

實例

修改所有圖片的顏色為黑白 (100% 灰度):

img {

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

提示: 訪問 CSS 濾鏡參考手冊 查看更多內(nèi)容。

響應(yīng)式圖片相冊

實例

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

}

}

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

}

}

嘗試一下 ?

圖片 Modal(模態(tài))

本實例演示了如何結(jié)合 CSS 和 JavaScript 來一起渲染圖片。

首先，我們使用 CSS 來創(chuàng)建 modal 窗口 (對話框), 默認是隱藏的。

然后，我們使用 JavaScript 來顯示模態(tài)窗口，當(dāng)我們點擊圖片時，圖片會在彈出的窗口中顯示：

實例

// 獲取模態(tài)窗口

var modal = document.getElementById('myModal');

// 獲取圖片模態(tài)框，alt 屬性作為圖片彈出中文本描述

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

modalImg.alt = this.alt;

captionText.innerHTML = this.alt;

}

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

}

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

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動時間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁框名></a>外部連結(jié)(在指定頁框連結(jié))

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設(shè)定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調(diào)整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項目

<em> 強調(diào)之用

<font face> 任意指定所用的字形

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動式表單的處理方式

<form method> 設(shè)定戶動式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<meta name="refresh" content url> 自動更新文件內(nèi)容

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設(shè)定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數(shù)

果你是一個前端工程師，圖片的處理你是肯定要會的，關(guān)于圖片的Base64編碼，你可能有點陌生，但是這是一個前端工程師應(yīng)該要掌握的知識點，今天我們就一起來看一下吧。

Base64

Base64編碼

那么什么是Base64編碼呢？

Base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，可以用該字符串來代替圖片的url屬性。

我們可以來看一下實際的效果

Base64編碼效果

在上圖中，我們可以看出img的src屬性開頭是data:image/png;base64，這種開頭表示的就是Base64編碼后的圖片格式，鼠標(biāo)放在src屬性上，可以看出實際的圖片。

圖片采用Base64編碼后的字符串非常長，這里截取一部分來看下效果

Base64編碼的部分字符串

真實的全部字符串會比這長的多，可能達到幾十KB

當(dāng)然，Base64編碼并不只是用在圖片處理上，還可以用在URL轉(zhuǎn)換上，比如說我們常見的迅雷以thunder開頭的專用地址，就是通過Base64加密處理過后的URL地址，如下圖所示

Base64處理后的URL

為何使用Base64編碼

存在及必然，那么我們?yōu)槭裁匆褂肂ase64編碼呢？

1.其中很重要的一點就是，使用Base64編碼可以減少網(wǎng)絡(luò)請求。

我們都知道，網(wǎng)頁上的圖片資源如果采用http形式的url的話都會額外發(fā)送一次請求，網(wǎng)頁發(fā)送的http請求次數(shù)越多，會造成頁面加載速度越慢。而采用Base64格式的編碼，將圖片轉(zhuǎn)化為字符串后，圖片文件會隨著html元素一并加載，這樣就可以減少http請求的次數(shù)，對于網(wǎng)頁優(yōu)化是一種比較好的手段。

2.采用Base64編碼的圖片是隨著頁面一起加載的，不會造成跨域請求的問題。

3.不會造成清理圖片緩存的問題

Base64編碼劣勢

Base64編碼既有優(yōu)勢也有劣勢，上述已經(jīng)說了Base64編碼的優(yōu)勢，接下來看看劣勢。

1.當(dāng)我們將一個只有幾KB的圖片轉(zhuǎn)化為Base64格式編碼，生成的字符串往往會大于幾KB，如果將其寫在一個css文件中，這樣一個css文件的大小會劇增，造成代碼可讀性差不說，還會造成請求傳輸?shù)臄?shù)據(jù)量遞增。

2.如果我們將Base64位的編碼的圖片存入數(shù)據(jù)庫中，會造成數(shù)據(jù)庫數(shù)據(jù)量的增大，這樣的效果還不如將圖片存至圖片服務(wù)器，而只在數(shù)據(jù)庫中存入url字段。

3.對于IE8以下的瀏覽器，不支持data url格式，IE8開始支持data url，卻對大小作出了限制，在使用時不是很方便。

如何使用

分析了Base64編碼的優(yōu)劣，那么我們該如何正確的使用Base64編碼呢？這里總結(jié)出使用Base64編碼的幾個地方。

• 對于極小或者極簡單的圖片，例如只有幾像素的圖片

• 不用考慮跨域問題

• 不想頁面的圖片緩存

總結(jié)

關(guān)于Base64編碼的圖片，有其優(yōu)勢，也有劣勢，需要我們自己總結(jié)，

今天的內(nèi)容，了解了嗎？