如何让背景图片全屏显示
如下图,这是一张1920*900的图片
把它设为背景图片后,咦,怎么这样了呢?
如何实现全屏显示呢,下面是实现方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片全屏</title> </head> <style type="text/css"> body { margin: 0; padding: 0; } .container { position: absolute; left: 0; right: 0; top: 0; bottom: 2px; z-index: -999; } img { width: 100%; height: 100%; } </style> <body> <div class="container"><img src="bg.jpg" alt=""></div> </body> </html>
如果图片是竖向,却又想全屏显示某一部分呢。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片全屏</title> </head> <style type="text/css"> body { margin: 0; padding: 0; background: url('bg2.jpg'); background-size: cover; background-position: 100% 30%; } </style> <body> </body> </html>
是不是感觉很有意思呢,哈哈哈哈哈~