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>
<!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>
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
