標籤：水平 nbsp osi back 寬高 捲軸 方向 預設 調整
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div>中國</div>10 <div id="div2"></div>11 <img src="img/草5.jpg">12 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>13 讓螢幕超過一屏產生捲軸。14 </body>15 </html>
1 div{ 2 width: 100px; 3 height: 100px; 4 /*background: red url(img/魚2.jpg) repeat-x;*/ 5 /*background-color: green;*/ 6 background-image: url(img/魚2.jpg); 7 background-repeat: ;/*設定圖片如何重複：預設repeat，可設no-repeat，repeat-x，repeat-y，round*/ 8 background-position: ;/*此屬性要求background-repeat設定成no-repeat才有效。預設左上，left、rigth、center、bottom、top兩兩組合使用，若只有一個則第二個值預設為center。x%y%水平垂直位置，0%0%左上，100%100%右下，若只有一個百分值，則另一個預設50%。xy，單位像素或em，0px0px左上，只有一個值只第二個值為50%*/ 9 }10 body{11 /*background: url(img/草3.jpg) no-repeat;*/12 /*background-attachment: fixed;*//*預設scroll隨螢幕一起滾動，可設fixed*/13 background-size: /*500px*//*50%*//*cover*/contain;/*若只設定一個則為寬，高會根據原圖比例調整。百分比為背景區別的百分比，非原圖的比例縮放。cover保證原圖寬高比橫豎方向擴充整個背景可能會有某個方向超出地區被切掉；contain保證原圖比例，使橫豎其中一個擴充到就完成。*/14 }15 #div2{16 width: /*300px*/150px;17 height: /*200px*/100px;18 background: rgba(255,125,0,0.3);19 margin: 50px;20 padding: 60px;21 border: 20px groove rgba(100,30,15,0.5);22 background: url(img/草5.jpg) no-repeat;23 /*background-origin: content-box;*//*border-box左上方對齊到外邊框；預設值padding-box左上方對齊到內邊框；content-box左上方對齊到內容邊框*/24 background-origin: border-box;25 background-clip: content-box;/*預設border-box從外邊框開始剪下，外邊框內都被保留。一般配合background-origin: border-box容易看出效果，從哪裡顯示，從哪裡裁剪。padding-box從內邊框開始裁剪。content-box從內容邊框開始裁剪。*/26 }
【CSS3】背景
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
