HTML5基礎加強css樣式篇（背景圖大小設定：background-size）（三十九）
阿新 • • 發佈：2019-01-11
1.background-size屬性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px 0 0 200px; width: 200px; height: 200px; background-color: orange; background-image: url("img/img11.jpg"); /*設定背景圖大小*/ /*background-size: x y;*/ background-size: 100% 100%; background-size: 200px 200px; background-size: 50% 50%; background-size: 50%; } .box:hover { } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> </script> </body> </html>
2.background-size：屬性值關鍵字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px 0 0 200px; width: 800px; height: 600px; background-color: orange; background-image: url("img/img16.jpg"); /*試用關鍵字控制圖片大小*/ background-repeat: no-repeat; /*background-size: cover;*/ background-size: 100% 100%; /*基於元素最大的邊計算背景圖的大小*/ background-size: cover; /*基於元素最小的邊計算背景圖的大小 1.背景圖原來的寬高比 2.確保在元素中全部顯示*/ background-size: contain; } .box:hover { } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> </script> </body> </html>