【求助】关于css背景有白边的问题.

缝合怪 2015-06-10 01:23:58

当我使用背景图片时，无论怎么调整，总是无法横向铺满整个屏幕。
但是我使用背景颜色时，总是能横向铺满整个屏幕。
下面是代码和运行效果：
1，使用背景图片
代码：
<%@page language="java" import="java.util.*,java.sql.*,java.text.SimpleDateFormat" pageEncoding="gb2312" %>
<html>
<style type="text/css">
#d1{
background-image: url(css1.png);
background-repeat: repeat-y;
position:fixed;
right:0px;
top:300px;

}
</style>

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

<form action="MyJsp.jsp" name="login">
<div id="d1" align="center"
style="width:100%; height:30%">
<br><br><br>
用户名<input name="username" type="text"><br>
<br>
密码 <input name="password" type="password"><br><br>
<input type="button" onclick="f()" value="登陆">
<input type="button" onclick="b()" value="注册">
</div>

</form>
</center>
<script type="text/javascript">
function f(){
username=document.login.username.value;
password=document.login.password.value;
if(username==""){
alert("用户名不能为空");
document.Login.username.focus();
return;
}
else if(password==""){
alert("密码不能为空");
document.Login.password.focus();
return;
}
document.login.submit();
}

function b(){
window.location.href="zc.jsp";
}
</script>

</body>
</html>

效果：

2，使用背景颜色
代码：
<%@page language="java" import="java.util.*,java.sql.*,java.text.SimpleDateFormat" pageEncoding="gb2312" %>
<html>
<style type="text/css">
#d1{
background-color:blue;
background-repeat: repeat-y;
position:fixed;
right:0px;
top:300px;

}
</style>

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

<form action="MyJsp.jsp" name="login">
<div id="d1" align="center"
style="width:100%; height:30%">
<br><br><br>
用户名<input name="username" type="text"><br>
<br>
密码 <input name="password" type="password"><br><br>
<input type="button" onclick="f()" value="登陆">
<input type="button" onclick="b()" value="注册">
</div>

</form>
</center>
<script type="text/javascript">
function f(){
username=document.login.username.value;
password=document.login.password.value;
if(username==""){
alert("用户名不能为空");
document.Login.username.focus();
return;
}
else if(password==""){
alert("密码不能为空");
document.Login.password.focus();
return;
}
document.login.submit();
}

function b(){
window.location.href="zc.jsp";
}
</script>

</body>
</html>

效果：

...全文

1188 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

缝合怪 2015-06-10

打赏
举报

引用 3 楼 gy127132060 的回复:

[quote=引用 2 楼 xzxlemontea 的回复:] [quote=引用 1 楼 gy127132060 的回复:]
<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啊！！！！！！！！！！！！！！！！！！解决了，但是为什么图片不是连贯的，后面的那一部分是从前面截断拼接到后面的

[/quote] 图片小于浏览器宽度了。。。这个涉及到图片拉伸问题。。。楼主可以尝试background-size:cover拉伸图片[/quote] 谢谢大神啊！完美解决了！！！！！！！！！！！！！！！

香蕉猪 2015-06-10

打赏
举报

引用 2 楼 xzxlemontea 的回复:

[quote=引用 1 楼 gy127132060 的回复:]
<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啊！！！！！！！！！！！！！！！！！！解决了，但是为什么图片不是连贯的，后面的那一部分是从前面截断拼接到后面的

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

缝合怪 2015-06-10

打赏
举报

引用 1 楼 gy127132060 的回复:



<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啊！！！！！！！！！！！！！！！！！！解决了，但是为什么图片不是连贯的，后面的那一部分是从前面截断拼接到后面的

香蕉猪 2015-06-10

打赏
举报


<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才是横向。。。

代码为博客实例代码http://blog.csdn.net/lmj623565791/article/details/34089553 有问题博客中留言

代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/30993277 有问题请博客留言

代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言

代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/31513065 有问题博客中留言

代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34825865 有问题，博客中留言