css背景屬性
阿新 • • 發佈：2021-06-30
背景屬性
''' background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平鋪滿) background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom) 簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">'''
注意：如果將背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；另外，如果此時要設定一個width＝100px，你也看不出效果，除非你設定出html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background-color:antiquewhite; } body{ width: 100px; height: 600px; background-color: deeppink; background-image: url(1.jpg); background-repeat: no-repeat; background-position: center center; } </style> </head><body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的背景屬性"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="1800;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>標題</title> <link rel="stylesheet" href="day108.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <p>捭闔之術</p> <div class="back"></div> <span></span> </body> </html>
p{ color: red; } p{ color: #d900ff; font-size: larger; } p{ color: rgb(0, 204, 255); font-size: 50%; } /*rgb三原色，分別是red/green/blue，各自數值區間為0-255*/ p{ color: rgba(188, 188, 80, 0.9); /*文字顏色*/ font-size: 30px; /*文字大小*/ font-family: "Times New Roman"; /*文字字型*/ font-weight: lighter; /*設定文字的粗細，最高900*/ font-style: oblique; /*字型樣式*/ background-color: beige; /*背景顏色*/ } /*a代表透明度的意思，0-1，數字越大透明度越低*/ .back{ border: 1px solid red; /*邊框粗細1px為實線且是紅色*/ width: 800px; /*寬800px*/ height: 800px; /*高800px*/ background-image: url("300x300.jpeg"); /*背景圖的url*/ background-repeat: no-repeat; /*是否平鋪，no-repeat為不平鋪，repeat-x為x軸平鋪，repeat-y為y軸平鋪*/ background-position: 0 center; /*第一個引數為離左邊框的距離，第二個引數為離上邊框的距離*/ } span{ display: inline-block; /*內聯標籤沒有寬高屬性，通過display可對塊級標籤和內聯標籤進行更改*/ width: 100px; height: 100px; background-image: url("icon.jpeg"); background-position: -295px 260px; /*一張圖有多個icon的話，此時可以在瀏覽器自行除錯，選擇對應需要的icon*/ }