Web中的圖像技術總結與實踐

摘要：當使用CSS背景顯示圖片時，它需要一個具有內容或特定寬度或高度的元素。它可以是HTML ，也可以是通過CSS背景生成的圖片，也可以是SVG 。

來源：https://ishadeed.com/article/image-techniques/

作者：Ahmad Shadeed

前端開發人員在構建網站時需要做出的決定之一就是添加圖片的技術。它可以是HTML <img> ，也可以是通過CSS背景生成的圖片，也可以是SVG <image> 。選擇正確的技術很重要，並且可以在性能和可訪問性方面發揮巨大作用。

在這篇文章中，我們除了提到各種包含圖片的方法外，還將瞭解到每種方法的優點和缺點，以及什麼時候和爲什麼要使用每種方法的來龍去脈。

1. HTML Img 元素

1.1 設置寬度和高度屬性
1.2 用CSS隱藏圖片
1.3 可訪問性問題
1.4 響應式圖片
1.5 調整圖片的大小

2. CSS背景圖片

2.1 如何使用CSS背景圖片
2.2 多背景
2.3 隱藏圖片
2.4 可訪問性問題
2.5 非開發人員無法下載
2.6 僞元素

3. SVG Image

3.1 可訪問性問題
3.2 非開發人員無法下載

4. 使用舉例

4.1 Hero Section
4.2 網站Logo
4.3 用戶頭像
4.5 帶圖標的輸入框
4.6 CSS 打印

1. HTML Img 元素

最簡單的情況下，圖片元素必須包含 src 屬性。

<img src="cool.jpg" alt="">

1.1 設置寬度和高度屬性

在頁面加載時，它們會在頁面圖片加載時發生一些佈局變化。爲了避免這種情況，我們可以設置 width 和 height 屬性：

<img src="cool.jpg" width="200" height="100" alt="">

雖然對某些人來說，這可能看起來有點過時，但它是有用的。讓我們用圖片來清楚地理解這個概念：

你注意到了嗎，右邊的圖片即使還沒有加載也會保留其空間嗎？這是因爲寬度和高度已經設置好了。它有明顯的區別！

Demo:https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100

1.2 用CSS隱藏圖片

可以用CSS隱藏圖片，但是它仍然會被加載到頁面中。因此，在執行此操作時請小心，如果一個圖片應該被隱藏，那麼它可能是出於裝飾的目的。

img {
  display: none;
}

同樣，以上內容也不會阻止瀏覽器加載圖片，即使該圖片在視覺上是隱藏的。原因是 <img> 被視爲替換元素 ^[2] ，因此我們無法控制其加載的內容。

1.3 可訪問性問題

HTML圖片應該通過將 alt 屬性設置爲有意義的描述來訪問，這對屏幕閱讀器用戶來說是非常有幫助的。

但是，如果不需要 alt 描述，請不要刪除，如果刪除了就會讀出圖片的 src ！這對可訪問性(無障礙)環境是非常不利的。

不僅如此，如果圖片因爲某種原因沒有加載，並且它有一個明確的 alt ，它將作爲一個備用值回退顯示。既然有一些有趣的事情我想讓大家知道，那我們就從視覺上說說吧。

我們有以下圖片：

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

src 無效，圖片沒有正常加載。第一個沒有 alt 屬性，而第二個是空的 alt 屬性。你能期待這個視覺效果嗎？

沒有 alt 的圖片仍然保留其空間，這很混亂，並且對可訪問性不利。雖然另一個摺疊了，以適應其空的 alt 屬性的內容，但由於它的邊框，導致了它作爲一個小點出現。

但是，當存在 alt 屬性值時，它將如下所示：

這不是很好的反饋嗎？另外，當圖片源發生故障時，可以向其中添加僞元素。

1.4 響應式圖片

<img> 的優點在於，可以針對特定視口大小將其擴展爲具有多個版本的圖片。例如，這可用於商品圖片。

我們有兩種不同的方式來生成一組響應式圖片：

1.4.1 `srcset` 屬性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

這是一個簡單的例子。對我來說，我不認爲使用 srcset 是根據屏幕寬度顯示多個圖片大小的完美解決方案。只能讓瀏覽器選擇合適的圖片，而我們對此無能爲力。

1.4.2 HTML Picture 元素

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

另一種選擇是使用 <picture> 元素。我更喜歡這種方式，因爲它更容易預測。

Demo：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

1.5 調整圖片的大小

我們可以使用 <img> 的一大優點就是 object-fit 和 object-position 屬性。它們讓我們可以控制 <img> 的內容如何調整大小和位置，就像CSS背景圖片一樣。

object-fit 的可能值爲：fill，contain，cover，none，scale-down

可以這樣使用：

img {
  object-fit: cover;
  object-position: 50% 50%;
}

現在，我們已經介紹了 <img> 元素，是時候繼續探索第二種技術了。

2. CSS背景圖片

當使用CSS背景顯示圖片時，它需要一個具有內容或特定寬度或高度的元素。通常，背景圖片的主要用途應該是用於裝飾目的。

2.1 如何使用CSS背景圖片

簡單來說，我們需要一個元素。

<div class="element">Some content</div>

.element {
  background: url('cool.jpg');
}

2.2 多背景

使用CSS背景圖片的好處是可以輕鬆地控制多個背景。考慮下面的例子：

.element {
  background: url('cool-1.jpg'), url('cool-2.jpg');
}

2.3 隱藏圖片

我們可以在特定的視口上隱藏和顯示圖片，而不會讓圖片被下載。如果圖片沒有用CSS設置，就不會被下載。這是比使用 <img> 更多的好處。

@media (min-width: 700px) {
  .element {
    background: url('cool-1.jpg');
  }
}

在上面的示例中，我們有一個背景圖片，僅在視口寬度大於 700px 時顯示。

2.4 可訪問性問題

如果使用不正確，背景圖片會對無障礙瀏覽不利。例如，將其用於文章的大拇指，這對文章至關重要。

2.5 非開發人員無法下載

你可能會覺得很有趣，但是普通人知道，如果要保存圖像，只需單擊鼠標左鍵，然後選擇保存即可。CSS背景圖片並非如此。您必須先檢查元素，然後在DevTools中的 url 中打開鏈接，然後才能下載隨CSS添加的圖像。

2.6 僞元素

可以使用僞元素與CSS背景圖片一起使用，例如，在圖片的頂部顯示一個疊加元素。對於 <img> 來說，除非我們爲覆蓋層添加一個單獨的元素，否則無法做到這一點。

3. SVG Image

SVG被認爲是圖像，它的最大功能在於縮放而不影響質量。另外，使用SVG，我們可以嵌入 JPG ， PNG 或 SVG 圖像。請參見下面的HTML：

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

你是否注意到了 prepareAspectRatio ？這樣一來，可以使圖像佔據SVG的整個寬度和高度，而不會被拉伸或壓縮。

當 <image> 寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。

這非常類似於CSS中的 object-fit:cover 或 background-size:cover 。

3.1 可訪問性問題

關於SVG的可訪問性，這使我想起了 <title> 元素。例如，我們可以像下面這樣添加它：

<svg width="200" height="200">
  <title>A photo of blueberry Cheescake</title>
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

我們甚至可以使用 <desc> 元素：

<svg width="200" height="200">
  <title>A photo of blueberry Cheescake</title>
  <desc>A meaningful description about the image</desc>
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

3.2 非開發人員無法下載

在檢查元素並複製圖像的URL之前，不可能下載嵌入到SVG中的圖像。然而，如果我們想要阻止用戶下載特定的圖像，這可能是一件好事。至少，它將減少下載圖像的機會很容易。

Demo：https://codepen.io/shadeed/pen/38225ba6b2cd706ca5bff48c131e83ce?editors=1100

4. 使用舉例

4.1 Hero Section

在構建 hero section 時，我們有時需要在標題和其他內容下面有一個圖像。如下圖所示：

注意這裏有一個圖像。你將如何構建它？好吧，讓我先補充一些要求：

在與後端CMS整合時，圖片應該是很容易動態變化的。
其上方有一個覆蓋層，有助於使內容易於閱讀。
圖像有三種尺寸：小、中和大。它們每個都用於特定的視口。

在開始解決方案之前，讓我們先問問自己這種背景的性質。這是一些入門問題：

爲用戶保留這個圖像很重要嗎，還是可以跳過它？
我們是否需要在所有視口尺寸上使用它？
它是靜態的還是動態變化的？

4.1.1 Hero - 解決方案1

通過使用多個CSS背景，我們可以將一個背景作爲疊加層，將另一個背景作爲實際圖像。請參閱下面的CSS：

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
  background-repeat: no-repeat;
  background-size: 100%, cover;
}

雖然此解決方案有效，但可以使用JavaScript動態更改背景圖片。見下面：

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

我添加了一個內聯的CSS背景。雖然這是可行的，但它看起來很醜，而且不實用。

也許我們可以使用CSS變量？讓我們來探索一下。

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

現在，我們可以輕鬆地更新 --bg-url 變量，這將動態更改背景。這比內聯的CSS好一百萬倍。

解決方案1要點：

解決方案只有在圖像不重要的情況下才是好的
當無法從後端CMS動態更改圖片時

Demo：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522

4.1.2 Hero - 解決方案2

對於此解決方案，我們將使用HTML圖像。見下面：

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

在CSS中，我們需要將圖片絕對定位在內容下方，並且還需要使用僞元素作爲疊加層。

.hero {
  position: relative;
}

.hero img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

此解決方案的優點在於，可以輕鬆更改圖片的 src 屬性。同樣，如果圖像很重要，它將會更加有用。

另外，我喜歡使用HTML <img> 的地方是可以在圖片沒有加載的情況下添加一個回退方法，這個回退至少可以保持內容的可讀性。

.hero img {
  /* 其他樣式 */
  background: #2962ff;
}

好處是，只有在圖像源失敗的情況下，背景纔會起作用。那不是很酷嗎？

Demo：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100

4.2 網站Logo

Logo是很重要的，因爲它可以將網站與其他網站區分開。要嵌入Logo，我們有兩種選擇：

<img> --> png，jpg，或者 svg
內聯SVG
背景圖像

讓我們學習使用哪種技術以及如何選擇合適的技術。

4.2.1 帶有詳細信息的Logo

當一個LOGO有很多細節或形狀時，用內嵌式SVG可能沒有那麼多好處。我建議使用 <img> ，圖片類型可以是 png 、 jpg 或 svg 。

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

4.2.2 一個需要動畫的簡單Logo

我們有一個簡單的Logo，其中包含形狀和文字。懸停時，形狀和文本需要更改顏色。怎麼做？對我來說最好的解決方案是使用內聯SVG。

<a href="#">
  <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
      <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
      <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
        <tspan x="63.923" y="36.923">Rect</tspan>
      </text>
    </g>
  </svg>
</a>

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Demo：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100

4.2.3 響應式Logo

這讓我想起了Smashing Magazine的Logo，我喜歡它從一個小圖標變成一個完整的Logo。參見下面的模型：

完美的解決方案是 <picture> 元素，可以在其中添加Logo的兩個版本。見下文：

<a class="logo" href="/">
  <picture>
    <source media="(min-width: 1350px)" srcset="sm-logo--full.svg">
    <img src="sm-logo.svg" alt="Smashing Magazine">
  </picture>
</a>

在CSS中，我們需要將視口的寬度更改爲等於或大於 1350px 。

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

簡單明瞭的解決方案。

Demo：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100

4.2.4 漸變Logo

當Logo具有漸變時，從Illustrator或Sketch等設計應用程序將其導出的過程可能並不完美，有時會中斷。

使用SVG，我們可以輕鬆地爲徽標添加漸變，我添加了 <linearGradient> 並將其用作文本填充。

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#4a7def"></stop>
      <stop offset="50%" stop-color="#ab4787"></stop>
    </linearGradient>
  </defs>
  <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
    <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
    <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
      <tspan x="63.923" y="36.923">Rect</tspan>
    </text>
  </g>
</svg>

Demo：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100

4.3 用戶頭像

對於用戶頭像，它們有很多形狀，但最常見的是矩形或圓形。在這個用例中，我很有興趣解釋一個你可能會覺得有用的重要技巧。

首先，我們來看看下面的模擬圖。注意，我們有一個完美的頭像，而且它們是100%的清晰。

但是，當用戶上傳半白色頭像或非常淺的頭像時，此設計將失敗。

注意到上面的模擬圖中，你要真的聚焦好了才知道里面有一個圓形。這就是一個問題，爲了解決這個問題，我們應該在頭像內部添加一個邊框，這將是在圖像太亮的情況下作爲備用。

我們有兩種選擇可以做到這一點：

<img> 元素
具有 <div> 的 <img>
具有CSS背景的 <div>
SVG <image>

其中哪一個最好？讓我們來探索。

4.3.1 使用 HTML `<img>`

您可能想到的第一件事就是添加邊框，對嗎？讓我們來探討一下（很抱歉，在下面的部分中，您可能會看到很多我的臉）。

.avatar {
  border: 2px solid #f2f2f2;
}

我們的目標是要有一個與圖像相融合的內部邊框，具有實邊是不實際的。

4.3.2 使用具有 `<div>` 的 `<img>`

現在的問題是，要添加內邊框，我們不能使用內部 box-shadow ，因爲它對圖像不起作用。解決的方法是用 <div> 包裹頭像，並添加一個專門用於內邊框的元素。

<div class="avatar-wrapper">
  <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
  <div class="avatar-border"></div>
</div>

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

通過在 <div> 上設置一個10%的黑色邊框，我們可以確保邊框與暗色圖像融合，只有在圖像顏色較淺的情況下，邊框纔會顯現出來。請看下面的模擬圖。

Demo：https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100

4.3.3 具有CSS背景的 `<div>`

如果我要使用 <div> 來顯示頭像，則可能表示該圖像具有裝飾性。我記得一個用例，它是分散在頁面中的隨機頭像。

我們可以有這樣的東西：

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Demo：https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100

4.3.4 SVG `<image>`

對我來說，這是最有趣的解決方案。我在檢查 Facebook的新設計 ^[12] 時注意到了它。

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

我先對其進行剖析，它包含以下內容：

用於將圖像剪切爲圓形的蒙層
對其應用了蒙層的group
圖像本身帶有 preserveAspectRatio = "xMidYMid"
用於內邊框的圓圈

在CSS中，我們將具有以下內容：

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

Demo：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100

這就是用戶頭像用例的全部內容。

4.5 帶圖標的輸入框

通常會看到帶有圖標的輸入框，如何添加？當輸入被聚焦時會發生什麼？讓我們來探索一下。

<p>
  <label for="name">Full name</label>
  <input type="text" id="name">
</p>

對我來說，處理這種情況的最佳解決方案是CSS背景圖片。簡單，快捷，不需要添加更多元素。

input {
  background-color: #fff;
  background-image: url('user.svg');
  background-size: 20px 20px;
  background-position: left 10px center;
  background-repeat: no-repeat;
}

要更改焦點上的圖標顏色，我們可以使用url編碼的SVG，並且很容易做到這一點。Yoksel的這個工具 ^[14] 很棒。

Demo：https://codepen.io/shadeed/pen/81f64125425dba02f7a0b725fa837381?editors=0110

4.6 CSS 打印

用戶可能需要打印web頁面。假設我們有一份食譜，你想把它打印出來，這樣你就可以在廚房裏看它，而不需要查看你的手機或電腦。

對於包含說明性步驟的菜譜，重要的是將它們打印出來，否則用戶將無法從打印web頁面中獲得任何好處。

4.6.1 避免使用圖像作爲CSS背景

當一個圖像作爲CSS背景被包含進來時，它不會被打印出來，取而代之的是一個空白區域。如下圖所示：

就是這樣的情況。我們可以通過強制瀏覽器顯示圖片來解決這個問題，雖然這對Firefox和IE來說不起作用。

.element {
  background: url('cheesecake.png') center/cover no-repeat;
  -webkit-print-color-adjust: exact; /* 強制瀏覽器以打印模式呈現背景 */
}

但是，使用HTML <img> 會更安全，因爲它可以打印而不會出現任何問題。

Demo：https://codepen.io/shadeed/pen/a42ab701809acfecd

推薦閱讀：

感謝您的閱讀和關注，看完三件事：

如果對你有幫助，幫忙文章右下角點個在看如果有什麼問題歡迎留言交流，還可以轉發，這是對作者最大的幫助。

Web中的圖像技術總結與實踐

1. HTML Img 元素

1.1 設置寬度和高度屬性

1.2 用CSS隱藏圖片

1.3 可訪問性問題

1.4 響應式圖片

1.4.1 `srcset` 屬性

1.4.2 HTML Picture 元素

1.5 調整圖片的大小

2. CSS背景圖片

2.1 如何使用CSS背景圖片

2.2 多背景

2.3 隱藏圖片

2.4 可訪問性問題

2.5 非開發人員無法下載

2.6 僞元素

3. SVG Image

3.1 可訪問性問題

3.2 非開發人員無法下載

4. 使用舉例

4.1 Hero Section

4.1.1 Hero - 解決方案1

4.1.2 Hero - 解決方案2

4.2 網站Logo

4.2.1 帶有詳細信息的Logo

4.2.2 一個需要動畫的簡單Logo

4.2.3 響應式Logo

4.2.4 漸變Logo

4.3 用戶頭像

4.3.1 使用 HTML `<img>`

4.3.2 使用具有 `<div>` 的 `<img>`

4.3.3 具有CSS背景的 `<div>`

4.3.4 SVG `<image>`

4.5 帶圖標的輸入框

4.6 CSS 打印

4.6.1 避免使用圖像作爲CSS背景

熱門新聞

週熱門

Web中的圖像技術總結與實踐

1. HTML Img 元素

1.1 設置寬度和高度屬性

1.2 用CSS隱藏圖片

1.3 可訪問性問題

1.4 響應式圖片

1.4.1 srcset 屬性

1.4.2 HTML Picture 元素

1.5 調整圖片的大小

2. CSS背景圖片

2.1 如何使用CSS背景圖片

2.2 多背景

2.3 隱藏圖片

2.4 可訪問性問題

2.5 非開發人員無法下載

2.6 僞元素

3. SVG Image

3.1 可訪問性問題

3.2 非開發人員無法下載

4. 使用舉例

4.1 Hero Section

4.1.1 Hero - 解決方案1

4.1.2 Hero - 解決方案2

4.2 網站Logo

4.2.1 帶有詳細信息的Logo

4.2.2 一個需要動畫的簡單Logo

4.2.3 響應式Logo

4.2.4 漸變Logo

4.3 用戶頭像

4.3.1 使用 HTML <img>

4.3.2 使用具有 <div> 的 <img>

4.3.3 具有CSS背景的 <div>

4.3.4 SVG <image>

4.5 帶圖標的輸入框

4.6 CSS 打印

4.6.1 避免使用圖像作爲CSS背景

Udesk微前端之路

CSS 技巧一則 -- 不定寬溢出文本適配滾動

從element-ui按需引入去探索

20個CSS快速提升技巧

用一個實戰案例，幫你完全掌握 HTML 和 CSS 的實際應用

寫給設計師的前端指南：一小時搞懂 CSS 屬性應用

UI設計師需要會編程嗎？快速入門HTML/CSS — (下)

SourceMap 知多少：介紹與實踐

寫給設計師的速成指南：一小時快速瞭解 CSS 基礎

Vue 3 新特性：在 Composition API 中使用 CSS Modules

[譯] 使用 CSS Paint API 動態創建與分辨率無關的可變背景

React系列十四 - React過渡動畫

巧用CSS cross-fade()實現背景圖像半透明效果

實戰|使用CSS Paint API動態創建與分辨率無關的可變背景

又一款開源圖標庫 CSS.GG，值得一用

熱門新聞

週熱門

1.4.1 `srcset` 屬性

4.3.1 使用 HTML `<img>`

4.3.2 使用具有 `<div>` 的 `<img>`

4.3.3 具有CSS背景的 `<div>`

4.3.4 SVG `<image>`