background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.backgr... ...
background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-position,廢話不多扯,直接代碼頁面展示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>11種常用css樣式之背景樣式學習</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 font: 14px/1.5em "Microsoft YaHei"; 12 color: #fff; 13 } 14 body{ 15 background-image:url(images/xs.png);/*背景圖像*/ 16 background-repeat: no-repeat;/*不重覆*/ 17 background-color: #ccc; 18 background-position:left center; 19 /* background-position: 50% 50%; */ 20 /*background-position: 10px 10px;*/ 21 /* 以視窗左上角為坐標系(0,0)定xy軸,朝right正,朝bottom為正 */ 22 /* background簡寫 */ 23 background: #f33 url(images/xs.png) no-repeat right center; 24 background-attachment: fixed;/*固定定位*/ 25 } 26 div.box{ 27 background-color:#f90;/*背景顏色*/ 28 } 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 你的壓力來源於:無法自律,只是假裝很努力;現狀跟不上內心的欲望;所以你焦慮又恐慌 Your stress comes from: unable to discipline yourself, but pretending to work hard; 34 </div> 35 <!-- <p>你的壓力來源於:無法自律,只是假裝很努力;現狀跟不上內心的欲望;所以你焦慮又恐慌 Your stress comes from: unable to discipline yourself, but pretending to work hard;</p>*50 回車50 --> 36 </body> 37 </html>