Day16:設定元素顏色並添加背景圖片

2024 iThome 鐵人賽

DAY 16

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 16 篇

16th鐵人賽

gogococo

2024-09-30 23:30:04

38 瀏覽

分享至

HTML 部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景圖與顏色設置</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="colored-box">
        <h1>這是一個有背景圖片和文字顏色的元素</h1>
        <p>這裡是內容描述</p>
    </div>

</body>
</html>

CSS 部分：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.colored-box {
    background-image: url('background.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    color: white; 
    padding: 50px; 
    text-align: center; 
    border-radius: 10px; 
}

.colored-box h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.colored-box p {
    font-size: 1.2em;
}

說明：
背景圖片 (background-image)：使用 url('background.jpg') 來加載背景圖片，你可以替換 'background.jpg' 為實際圖片的路徑。
背景尺寸 (background-size)：cover 讓背景圖片覆蓋整個元素，根據元素的大小自動縮放圖片。
背景位置 (background-position)：center 讓圖片在元素內居中顯示。
文字顏色 (color)：設置元素中的文字顏色為白色。
其他樣式：如邊框圓角 (border-radius) 和內邊距 (padding)，可根據需要調整。

這個範例展示了一個帶有背景圖片和白色文字的盒子，背景圖片不會重複，並且會自動調整大小以適應容器。