iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
自我挑戰組

從零開始的HTML系列 第 13

Day 13 CSS中替元素加上背景圖

  • 分享至 

  • xImage
  •  

在CSS中,可以使用background-image屬性來為元素設置背景圖片。這個屬性允許你為任何元素(如<div><p><body>等)指定一個圖片作為背景。除了基本的背景圖片設定,還可以使用多種屬性來調整背景圖的顯示方式,例如定位、重複模式、大小等。

基本語法如下:

selector {
    background-image: url('image-path');
}

url('image-path')用於指定背景圖片的路徑,可以是相對路徑或絕對路徑。此屬性常與其他背景屬性一起使用,如background-repeat(控制背景圖的重複方式)、background-position(控制背景圖的位置)以及background-size(控制背景圖的大小)。

舉個例子,假設我們有一個<div>元素,我們想為它設置一個背景圖,並且希望背景圖能覆蓋整個元素,不重複顯示,且在中央位置。可以這樣寫:

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>背景圖示範</title>
    <style>
        .example {
            width: 300px;
            height: 200px;
            background-image: url('path/to/image.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

在這個例子中,background-size: cover;確保背景圖會縮放以完全覆蓋元素,background-position: center;讓背景圖在容器中居中顯示,background-repeat: no-repeat;則防止背景圖重複。


上一篇
Day 12 CSS設定顏色
下一篇
Day 14 CSS中設定元素的寬度與高度
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言