整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁(yè)上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失，且壓縮率高，支持動(dòng)畫效果，很適合互聯(lián)網(wǎng)平臺(tái)，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會(huì)對(duì)一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數(shù)據(jù)越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁(yè)圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn)，還支持48 bit的色彩，跨平臺(tái)的圖像亮度控制，更多層的透明度設(shè)置。
網(wǎng)頁(yè)中通過<img>標(biāo)簽插入圖片，語(yǔ)法如下：
<img src="圖片路徑" alt="替換文本" />具體示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動(dòng)畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請(qǐng)注意，插入動(dòng)畫圖像的語(yǔ)法與插入普通圖像的語(yǔ)法沒有區(qū)別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當(dāng)瀏覽器無法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網(wǎng)頁(yè)中插入一個(gè)寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網(wǎng)頁(yè)中對(duì)一個(gè)圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁(yè)面。
<a href="頁(yè)面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對(duì)整個(gè)圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個(gè)熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置，相對(duì)于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽(yáng)或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會(huì)打開對(duì)應(yīng)的圖片。
到此網(wǎng)頁(yè)中使用圖片已經(jīng)大體介紹了，自己親手寫下，會(huì)加深印象，感謝關(guān)注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網(wǎng)頁(yè)中使用視頻音頻
構(gòu)建現(xiàn)代網(wǎng)頁(yè)時(shí)，圖片是不可或缺的元素之一。它們能夠增強(qiáng)視覺吸引力，幫助傳達(dá)信息，并提升用戶體驗(yàn)。然而，如果圖片沒有得到適當(dāng)?shù)膬?yōu)化，它們可能會(huì)顯著拖慢網(wǎng)站的加載速度，影響用戶體驗(yàn)和搜索引擎優(yōu)化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優(yōu)化這些格式的策略和示例。
根據(jù)圖片內(nèi)容和用途選擇最合適的格式。例如，對(duì)于網(wǎng)頁(yè)上的照片，JPEG可能是最佳選擇，因?yàn)樗诒３窒鄬?duì)較小的文件大小的同時(shí)提供了良好的圖像質(zhì)量。對(duì)于需要透明背景的圖標(biāo)，PNG可能更合適。
使用工具或服務(wù)壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲(chǔ)為Web所用格式”功能來減小JPEG文件的大小。
根據(jù)需要在網(wǎng)頁(yè)中顯示的大小調(diào)整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因?yàn)檫@會(huì)導(dǎo)致不必要的加載時(shí)間。
通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。
對(duì)于非視口內(nèi)的圖片，可以使用延遲加載（lazy loading）技術(shù)。這樣，只有當(dāng)用戶滾動(dòng)到圖片位置時(shí)，圖片才會(huì)加載。
使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來分發(fā)圖片，可以減少加載時(shí)間，因?yàn)閳D片會(huì)從離用戶最近的服務(wù)器加載。
假設(shè)你有一個(gè)高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網(wǎng)頁(yè)上以800x600像素的尺寸展示，那么：
優(yōu)化后的圖片可能只有100KB左右，大大減少了加載時(shí)間。
如果你有一個(gè)圖標(biāo)，需要在網(wǎng)頁(yè)上以多種尺寸展示，并且需要透明背景：
圖片優(yōu)化對(duì)于提高網(wǎng)頁(yè)加載速度至關(guān)重要。通過選擇合適的圖片格式，壓縮文件大小，調(diào)整尺寸，使用響應(yīng)式圖片技術(shù)，實(shí)現(xiàn)延遲加載，以及利用CDN，可以確保圖片在不犧牲質(zhì)量的情況下快速加載。這不僅能提升用戶體驗(yàn)，還能對(duì)SEO產(chǎ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)起來要簡(jiǎ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的樣式，也就是說頁(yè)面中的內(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)方式，有興趣的讀者可以留言我們一起討論。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
