CSS背景屬性與動態效果(DAY13)

2021 iThome 鐵人賽

DAY 13

Modern Web

網頁前端基礎&Vue.js系列第 13 篇

13th鐵人賽

Vince

2021-09-26 11:33:14

2821 瀏覽

分享至

這篇文章要介紹有關背景的CSS屬性，包括背景顏色、圖片、透明度、滾動，背景圖片的重複，背景的位置以及背景的動態變換等，非常多的屬性和效果，以下會先介紹屬性的語法，再實際作範例來看看網頁呈現的效果!

背景相關屬性

背景顏色
屬性:background-color:
背景圖片
屬性:background-image:url("")
背景透明度
屬性:opacity:
(背景和背景上的文字將會一起變透明)
屬性:background:rgba( , , , )
Ex: background: rgba( 128,0 ,0 ,0.5 )
(背景上的文字不會跟著背景一起變透明)
上面的Ex中代表r(紅)的屬性值為128，g(綠)、b(藍)的屬性值為0，和opacity透明度的屬性值為0.5 (0~1)(完全透明~完全不透明)
背景滾動
屬性:background-attachment:
屬性值:fixed(固定)、scroll(滾動)
(fixed意思是在拉網頁右方的滾動軸時，背景圖片還是固定不動在原本的位置;而scroll將會隨著滾動軸的操作移動)
背景圖片的重複
屬性:background-repeat:
屬性值:
repeat(預設):水平與垂直方向都會重複
no-repeat:不重複
x-repeat:沿著水平方向重複
y-repeat:沿著垂直方向重複
背景位置
屬性:background-position:
屬性值:可以使用top、center、bottom(垂直位置)，left、center、right(水平位置)，也可以使用之前介紹過的單位(%、px等)

動態效果

<style>
        body {
            animation-name: example;
            /*動畫名稱(需和@keyframes的動畫名稱一樣)*/
            animation-duration: 8s;
            /*動畫歷經時間*/
            animation-iteration-count:infinite
            /*無限循環*/
        }
        @keyframes example {
            /*(@keyframes是用來建立動畫的屬性，example是動畫名稱，可自訂名稱)*/
            from {
                /*動畫開始的效果*/
            }
            to {
                /*動畫結束的效果*/
            }
    </style>

範例1

開啟網頁時將會自動把一開始設定的背景顏色慢慢地轉換成另一種顏色，並且重複循環!

<head>
    <style>
        body {
            background-color: aliceblue;
            animation-name: example;
            animation-duration: 8s;
            animation-iteration-count:infinite
        }
        @keyframes example {
            from {
                background-color:antiquewhite;
            }
            to {
                background-color:azure;
            }
        }
    </style>
</head>
<body>
    <div style="text-align:center">
        <h1>樂氣球嘉年華</h1>
        <video src="IMG_4736.MOV" controls></video>
    </div>
</body>

範例2

將按鈕button的背景設為白色透明，就能看到div區塊的背景圖片顯現在button上，並且滑鼠移至button上方時會變換button的背景顏色!

<style>
        div.background {
            background: url(doraemon.jpg) repeat;
            border: 2px solid black;
            text-align:center;
        }
        .other{
            margin: 5px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity: 0.6;
            width:160px;
            height:160px;        
        }
        .other:hover{
            background-color:burlywood;
        }
    </style>
</head>
<body>
    <div class="background">
        <input style="font-size:xx-large;font-weight:900 " type="button" value="侏儸紀" class="other">
    </div>
</body>