Heim > Web-Frontend > HTML-Tutorial > 【】关于css背景有白边的问题._html/css_WEB-ITnose

【】关于css背景有白边的问题._html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:43:01
Original
2549 Leute haben es durchsucht

当我使用背景图片时,无论怎么调整,总是无法横向铺满整个屏幕。
但是我使用背景颜色时,总是能横向铺满整个屏幕。
下面是代码和运行效果:
1,使用背景图片
代码:


    
  
  


     Class.forName("com.mysql.jdbc.Driver");
  Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/final","root","aaaa8888");
  Statement stat=conn.createStatement(); 
  String sql;
   %>

    

    
      style="width:100%; height:30%">
    



                       用户名

                       

                       密码    


                       
                       
                       
                       
    

    
  <script> <br /> function f(){ <br /> username=document.login.username.value; <br /> password=document.login.password.value; <br /> if(username==""){ <br /> alert("用户名不能为空"); <br /> document.Login.username.focus(); <br /> return; <br /> } <br /> else if(password==""){ <br /> alert("密码不能为空"); <br /> document.Login.password.focus(); <br /> return; <br /> } <br /> document.login.submit(); <br /> } <br /> <br /> <br /> function b(){ <br /> window.location.href="zc.jsp"; <br /> } <br /> </script>

  


效果:



2,使用背景颜色
代码:


    
  
  
     Class.forName("com.mysql.jdbc.Driver");
  Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/final","root","aaaa8888");
  Statement stat=conn.createStatement(); 
  String sql;
   %>

    

    
      style="width:100%; height:30%">
    



                       用户名

                       

                       密码    


                       
                       
                       
                       
    

    
  <script> <br /> function f(){ <br /> username=document.login.username.value; <br /> password=document.login.password.value; <br /> if(username==""){ <br /> alert("用户名不能为空"); <br /> document.Login.username.focus(); <br /> return; <br /> } <br /> else if(password==""){ <br /> alert("密码不能为空"); <br /> document.Login.password.focus(); <br /> return; <br /> } <br /> document.login.submit(); <br /> } <br /> <br /> <br /> function b(){ <br /> window.location.href="zc.jsp"; <br /> } <br /> </script>

  


效果:


回复讨论(解决方案)

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里background-repeat: repeat-y;应该是repeat-x;x才是横向。。。

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里background-repeat: repeat-y;应该是repeat-x;x才是横向。。。



3q啊!!!!!!!!!!!!!!!!!!解决了,但是为什么图片不是连贯的,后面的那一部分是从前面截断拼接到后面的


<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里background-repeat: repeat-y;应该是repeat-x;x才是横向。。。



3q啊!!!!!!!!!!!!!!!!!!解决了,但是为什么图片不是连贯的,后面的那一部分是从前面截断拼接到后面的



图片小于浏览器宽度了。。。这个涉及到图片拉伸问题。。。
楼主可以尝试background-size:cover拉伸图片



<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


这里background-repeat: repeat-y;应该是repeat-x;x才是横向。。。



3q啊!!!!!!!!!!!!!!!!!!解决了,但是为什么图片不是连贯的,后面的那一部分是从前面截断拼接到后面的

图片小于浏览器宽度了。。。这个涉及到图片拉伸问题。。。
楼主可以尝试background-size:cover拉伸图片
谢谢大神啊!完美解决了!!!!!!!!!!!!!!!
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