繁星CSS3之旅-CSS基本樣式-CSS背景

時間 2019-12-10

標籤繁星 css3 css 之旅基本樣式背景欄目 CSS 简体版

原文原文鏈接

CSS背景css

一、背景html

CSS容許應用純色做爲背景，也容許使用背景圖像建立至關複雜的效果測試

（1）設置背景顏色url

例：spa

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>測試背景是否能夠繼承</p>
</html>

body{
    background-color: darkgray;
}
p{
    width:150px;/*增寬*/
    padding: 10px;/*內邊距10px*/
    background-color: red;
}

效果圖code

（2）、設置背景圖片htm

body{
    background-image: url("bg.jpg");/*圖片名稱*/
}

效果圖blog

body{
    background-image: url("bg.jpg");/*圖片名稱*/
    background-repeat: repeat-x;/*重複X軸&重複y軸：repeat-y*/
}

body{
    background-image: url("bg.jpg");/*圖片名稱*/
    background-repeat: no-repeat;/*重複X軸&重複y軸：repeat-y*/
    background-position: center top;/*從中間頂部開始顯示*/
}

background-attachment效果繼承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
    <p>測試背景是否能夠繼承</p>
</html>

body{
    background-image: url("bg.jpg");/*圖片名稱*/
    background-repeat: no-repeat;/*重複X軸&重複y軸：repeat-y*/
    background-position: left top;/*從中間頂部開始顯示*/
    background-attachment: fixed;
}