簡單的 HTML 範例，示範如何將該圖片匯入網頁

日期：

簡單的 HTML 範例，示範如何將該圖片匯入網頁



<!DOCTYPE html>

<html lang="zh-Hant">

<head>

  <meta charset="utf-8">

  <title>匯入圖片範例</title>

</head>

<body>

  <h1>我的圖片展示</h1>

  <!-- 使用 <img> 標籤顯示圖片 -->

  <img 

    src="https://www.freevector.com/uploads/vector/preview/92881/rev-vecteezychatgpt-backgroundaf0223_generated.jpg" 

    alt="ChatGPT 背景圖" 

    width="600"

  >

</body>

</html>




更多的網路圖片

https://www.freevector.com/vector/ai



如果想要當作背景圖使用，也可以在 CSS 裡使用 background-image 來達成，例如：

<!DOCTYPE html>

<html lang="zh-Hant">

<head>

  <meta charset="utf-8">

  <title>背景圖片範例</title>

  <style>

    body {

      /* 利用 background-image 設定背景圖 */

      background-image: url('https://www.freevector.com/uploads/vector/preview/92881/rev-vecteezychatgpt-backgroundaf0223_generated.jpg');

      background-size: cover; /* 讓背景自動縮放填滿視窗 */

      background-repeat: no-repeat; /* 不重複顯示 */

      margin: 0;

      padding: 0;

    }

  </style>

</head>

<body>

  <h1 style="color: #fff; text-align: center; padding: 50px;">這是背景圖示範</h1>

</body>

</html>




  • background-image: url('圖片連結'): 以該連結作為背景圖。

  • background-size: cover: 使背景圖保持比例，並盡量填滿螢幕。

  • background-repeat: no-repeat: 避免背景圖重複排列。

以上方式都可以成功在網頁中匯入該圖片，視需求選擇合適的用法即可。

HTML 嵌入Scratch

https://scratch.mit.edu/projects/1114821633


<iframe src="https://scratch.mit.edu/projects/1114821633/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>