Rumah > hujung hadapan web > html tutorial > 网页背景图片全屏设置_html/css_WEB-ITnose

网页背景图片全屏设置_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:30:50
asal
2518 orang telah melayarinya

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 />
Salin selepas log masuk

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%;}
Salin selepas log masuk

 

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan