在css中,可以利用“background-size:cover;”樣式讓圖片充滿屏幕,“background-size”屬性的作用是設(shè)置背景圖片的大小,當(dāng)屬性值為“cover”時(shí),背景圖片就會(huì)擴(kuò)展至足夠大,使背景圖片完全充滿屏幕。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
哪個(gè)css樣式能讓圖片充滿屏幕
在css中可以利用background-size屬性使圖片能夠充滿整個(gè)屏幕,首先我們將圖片設(shè)置為body的背景圖片這時(shí)候再通過background-size屬性即可使圖片充滿屏幕,該屬性的作用是規(guī)定背景圖像的尺寸。
當(dāng)該屬性的值為cover時(shí),把背景圖像擴(kuò)展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
示例如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>title</title> </head> <body style="background-image: url(1118.02.png);"> <style> body{ background-size: cover; } </style> </body> </html>
輸出結(jié)果:
(學(xué)習(xí)視頻分享:css視頻教程)