H5C3--background中cover，背景樣式，提升響應區域+精靈圖的使用
阿新 • • 發佈：2018-01-13
content post margin mage spl 其它 16px back border
一.cover的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100%; 9 height: 360px; 10 background-color: #ccc; 11 background-image: url("../images/slide_01_2000x410.jpg"); 12 background-repeat: no-repeat; 13 /*讓圖片居中顯示*/ 14 background-position: center center; 15 /*讓圖片進行縮放*/ 16 background-size: cover; 17 } 18 </style> 19 </head> 20 <body> 21 <div></div> 22 </body> 23 </html>
這個用法能讓圖片的主體內容顯示，而且不失真
二.背景樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid #ccc; 11 /*設置背景圖片:默認會以容器的左上角做為平鋪的原點。 12 本質上講，不管圖片的大小是否超出容器的範圍，默認都會平鋪。*/ 13 background-image: url("../images/share1.png"); 14 15 overflow: scroll; 16 /*background-image: url("../images/bg-img.jpg");*/ 17 /*background-repeat: no-repeat;*/ 18 /*設置背景平鋪 19 round:會將背景圖片進行縮放，來適應容器的大小 20 space:並舉對背景圖片進行縮放，但是也不會讓背景圖片無法完全顯示，會將多余的空間平分(兩邊沒有空間)*/ 21 /*background-repeat: space;*/ 22 /*設置背景圖片的大小 23 length:設置水平和垂直方向的大小，具體的數值，但是這個值的設置有可能造成圖片的比例失調，所以在使用這種設置的時候，一定要保證比例的和之前圖片一致 24 percentage:百分比.參照的是容器--不建議使用*/ 25 /*background-size: 300px 300px;*/ 26 /*background-size: 50% 50%;*/ 27 /*contain:將背景圖片全部包含在容器中，它會對背景素材進行等比例縮放.它會造成容器的空白區域*/ 28 /*background-size: contain;*/ 29 /*cover:將背景素材完全的覆蓋容器*/ 30 /*background-size: cover;*/ 31 32 /*設置背景是否跟隨滾動 33 fixed:固定背景位置，不讓背景跟隨滾動 34 local:滾動屏幕，會跟隨滾動，同時如果在滾動局部的結構塊，這個結構塊的背景也會跟隨滾動 35 scroll:滾動屏幕，會跟隨滾動，同時如果在滾動局部的結構塊，這個結構塊的背景不會跟隨滾動*/ 36 background-attachment: local; 37 38 } 39 </style> 40 </head> 41 <body> 42 <!-- 43 背景樣式： 44 background-color:設置背景色 45 background-image:設置背景圖片 46 background-position:x y left center right top center bottom 47 background-size:length/percent/cover/contain 48 background-attachment:設置背景圖片跟隨滾動 fixed / scroll / local 49 background-repeat:設置背景平鋪 no-repeat repeat-x repeat-y repeat round space 50 51 background-origin:設置背景圖片的填充原點 border-box / padding-box / content-box 52 background-clip:設置背景圖片的裁切 border-box / padding-box / content-box 53 --> 54 <div> 55 <p style="height:600px;"></p> 56 </div> 57 <p style="height: 1000px;"></p> 58 </body> 59 </html>
三.提升響應區域+精靈圖的使用
sprites.png
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 width: 50px; 9 height: 50px; 10 display: block; 11 margin:100px; 12 box-sizing: border-box; 13 /*border: 10px solid rgba(255,0,0,0.5);*/ 14 padding:13px; 15 16 /*添加背景*/ 17 background-image: url("../images/sprites.png"); 18 /*讓背景偏移*/ 19 background-position: -58px 0; 20 21 /*設置背景圖片的填充的參考原點 22 border-box:背景從border的區域開始填充,背景和邊框區域重疊 23 padding-box:背景從padding的區域開始填充,背景和padding區域重疊 24 content-box:背景從內容的區域開始填充,背景和內容區域重疊*/ 25 background-origin: content-box; 26 /*設置背景圖片的裁切：設置的是裁切，控制的是顯示 27 content-box：顯示content-box的內容，而裁切掉其它的區域的內容 28 padding-box：顯示padding-box的內容，而裁切掉其它的區域的內容 29 border-box：顯示border-box的內容，而裁切掉其它的區域的內容*/ 30 background-clip: content-box; 31 } 32 </style> 33 </head> 34 <body> 35 <a href="#"> 36 </a> 37 </body> 38 </html>
提升鼠標的響應區域：
圖中的綠色區域就是響應區域
H5C3--background中cover，背景樣式，提升響應區域+精靈圖的使用