background-size設置背景圖像的尺寸大小

本文轉載自查看原文 2020-10-30 17:34 709 html/css/ 珠峰htmlcss

background-size設置對象的背景圖像的尺寸大小

<length>用長度值指定背景圖像大小,不允許負值;=>background-size:X軸尺寸大小 Y軸尺寸大小
<percentage>用百分比指定背景圖像大小,不允許負值;
auto背景圖像的真實大小;
cover將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器;
contain將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 .pic{
 8 width: 2400px;
 9 height: 1600px;
10 background: url(https://mobike.com/cn/assets/themes/moby/img/landing/hero-bg-4.jpg) no-repeat;
11 /* background-size: 500px 500px; */
12 background-size: 50% 50%;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="pic"></div>
18 </body>
19 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 background-size （設置背景圖片的大小） css 背景圖片尺寸設置 background-size css設置全屏背景圖，background-size 屬性 css設置全屏背景圖，background-size 屬性 css background-size與背景圖片填滿div css background-size與背景圖片填滿div background-size定義背景圖片的高和寬用background-size實現背景圖片自適應瀏覽器大小，但不變形解決IE8,7下設置背景圖片 background-size 不支持問題 css——background屬性設置background-size