Rumah > Artikel > hujung hadapan web > 网页背景图片全屏设置_html/css_WEB-ITnose
网页背景图片全屏设置_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:30:502489semak imbas
1.首先设置body的高度为100%，overflow属性设为hidden(溢出隐藏)
2.body内div宽和高都设为100%,overflow属性设为hidden ,z-index:-1（确保背景图片在最下面）
3.设置div内的img宽高都为100%;
html 代码如下：<br /><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="css/login_one.css" rel="stylesheet" /> <script src="../../javascript/jquery-1.8.3.js"></script> <script type="text/javascript"> </script></head><body> <div id="lay_bg" class="lay_background"> <img id="lay_bg_img" class="lay_background_img" src="img/20151105165147_de95cb.jpg"/ alt="网页背景图片全屏设置_html/css_WEB-ITnose" > </div></body></html><br /><br /><br /><br />
css代码如下：<br />body { background: #888 none repeat scroll 0 0; font-family:'Microsoft YaHei'; height:100%; margin:0; padding:0; overflow:hidden;}.lay_background { width:100%; height:100%; z-index:-1; overflow:hidden;}.lay_background_img { width:100%; height:100%;}
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS秘密花园:磨砂玻璃效果_html/css_WEB-ITnoseArtikel seterusnya：html5/css3响应式布局介绍_html/css_WEB-ITnose