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

php中文网
发布: 2016-06-24 11:43:01
原创
2785人浏览过

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

  


效果:

绘蛙AI商品图
绘蛙AI商品图

电商场景的AI创作平台,无需高薪聘请商拍和文案团队,使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

绘蛙AI商品图 178
查看详情 绘蛙AI商品图

回复讨论(解决方案)

<style type="text/css">   #d1{   background-image: url(css1.png);   background-repeat: repeat-y;   position:fixed;    right:0px;   top:300px;   }   </style>
登录后复制


这里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>
登录后复制


这里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>
登录后复制


这里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>
登录后复制


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



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

图片小于浏览器宽度了。。。这个涉及到图片拉伸问题。。。
楼主可以尝试background-size:cover拉伸图片
谢谢大神啊!完美解决了!!!!!!!!!!!!!!!
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号