Heim > Web-Frontend > HTML-Tutorial > 网页背景图片全屏设置_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:30:50
Original
2534 Leute haben es durchsucht

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 />
Nach dem Login kopieren

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%;}
Nach dem Login kopieren

 

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage