ホームページ >ウェブフロントエンド >htmlチュートリアル >【】CSS背景の白フチ問題について._html/css_WEB-ITnose
当我使用背景图片时,无论怎么调整,总是无法横向铺满整个屏幕。
但是我使用背景颜色时,总是能横向铺满整个屏幕。
下面是代码和运行效果:
1,使用背景图片
代码:
9129e9107749a5052d938f50f448324b
100db36a723c770d327fc0aef2ce13b1
46d5fe1c7617e3914f214aaf043f4ccf
#d1{
background-image: url(css1.png);
background-repeat: repeat-y;
position:fixed;
right:0px;
top:300px;
}
531ac245ce3e4fe3d50054a55f265927
36613f7b712078c5ce6a846caa1a9f95
6c0fb9c8ecc089f0f4d49f0553d477c1
1e25cd1bacf487f38d078dd47309d847
2348e3a06a9b1bef187940b8c0df4f6a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
用户名65c66f718e7553c00f08c9ee5fc59a5f0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a
密码 c5956f77ce1de04ac80d4a62707969bf0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
e656cafeec46c8d56fff8792111076e7
5b3166500fdfb15499b138a09566e753
16b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e
adca8a5fa06ffeafb062c2e3f274b930
8019067d09615e43c7904885b5246f0a
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";
}
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
效果:
2,使用背景颜色
代码:
9129e9107749a5052d938f50f448324b
100db36a723c770d327fc0aef2ce13b1
46d5fe1c7617e3914f214aaf043f4ccf
#d1{
background-color:blue;
background-repeat: repeat-y;
position:fixed;
right:0px;
top:300px;
}
531ac245ce3e4fe3d50054a55f265927
36613f7b712078c5ce6a846caa1a9f95
6c0fb9c8ecc089f0f4d49f0553d477c1
1e25cd1bacf487f38d078dd47309d847
2348e3a06a9b1bef187940b8c0df4f6a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
用户名65c66f718e7553c00f08c9ee5fc59a5f0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a
密码 c5956f77ce1de04ac80d4a62707969bf0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
e656cafeec46c8d56fff8792111076e7
5b3166500fdfb15499b138a09566e753
16b28748ea4df4d9c2150843fecfba68 ;
.username.value;
パスワード=document.login .password.value;
if(username==""){
document.Login.username.focus();
return;
}
else if(password== ""){
document.Login.password.focus();
document.login.submit( );
関数 b() {
2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e
ディスカッションへの返信 (解決策)
<style type="text/css"> #d1{ background-image: url(css1.png); background-repeat: repeat-y; position:fixed; right:0px; top:300px; } </style>
<style type="text/css"> #d1{ background-image: url(css1.png); background-repeat: repeat-y; position:fixed; right:0px; top:300px; } </style>
<style type="text/css"> #d1{ background-image: url(css1.png); background-repeat: repeat-y; position:fixed; right:0px; top:300px; } </style>
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 である必要があります。 。 。
3q! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !解決しましたが、画像がまとまらないのはなぜですか? 後半部分が前面から切り取られて背面に接続されています。