CSS中,我們常常需要將圖片占滿整個屏幕以展示更好的視覺效果。以下是一些實現方法:
/* 方法1:使用background-size */ html, body { height: 100%; } body { background: url('image.jpg') center center / cover no-repeat; } /* 方法2:使用position */ html, body { height: 100%; } img { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; }
方法1使用的是CSS3的background-size屬性,將圖片鋪滿整個屏幕。方法2則是利用定位和最小寬高度來實現圖片鋪滿。下面是具體的解釋:
- background-size: cover;
- 注意:該屬性必須設置在background中,而不是background-image。因此我們需要先將background設置為圖片地址或者none,再在此基礎上設置background-size。
- cover表示圖片將自適應最大化,可能會被裁剪,將background-position設置為center center可以使其水平垂直居中。
- position: absolute;
- 將img的父元素設置為html和body,并將其高度設為100%,這樣img就可以占滿整個屏幕。
- 然后通過設置top和left為0,讓img從左上角開始蓋住整個頁面。
- 然后再將最小寬和最小高度設置為100%,確保圖片大小不會小于屏幕。
以上是兩種方法,可以根據需要來選擇。但需要注意的是,使用background-size會更容易實現響應式布局。
下一篇mysql服務器名是啥