[英]Background-Position on HTML tag not working
I'm following one tutorial on webdesign tutsplus, Final Page: http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.html 我正在关注webdesign tutsplus的一个教程,最终页面: http ://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.html
I've completed everything but one problem is coming in html styling, you can see I've included height:100% , but in original tutorial there was not that line, if I remove that line then it's collapsing, but in original tutorial it's perfect, why so? 我已经完成了一切,但是一个问题是html样式,你可以看到我已经包括高度:100%,但在原始教程中没有那条线,如果我删除那条线然后它崩溃了,但在原始教程中它是完美,为什么呢?
And also right now I've done height:100% then you can scroll at bottom and can see there's a margin left off at bottom, I want that image to stick at the very bottom of the page. 而且现在我已经完成了高度:100%然后你可以在底部滚动并且可以看到底部留有一个边距,我希望该图像粘在页面的最底部。
Please download image also so that you can try this code, here are the links of images: 请下载图片以便您可以尝试此代码,以下是图片链接:
http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/bottom_bg.jpg http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/bottom_bg.jpg
http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.png http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.png
CodePen = http://codepen.io/joe/full/xruKk CodePen = http://codepen.io/joe/full/xruKk
jsFiddle = http://jsfiddle.net/rssatnam/YekQe/embedded/result/ jsFiddle = http://jsfiddle.net/rssatnam/YekQe/embedded/result/
code : 代码:
<html>
<head>
<style type="text/css">
html{
background:#77d5fb url('bottom_bg.jpg') bottom center no-repeat;
height:100%;
}
body{
background:transparent url('top_bg.png') top center no-repeat;
height:100%;
width:100%;
margin:0 0;
}
#container{
width:900px;
margin:0 auto;
}
#navBar{
height:62px;
background-color:#e5592e;
margin:3em 0;
position:relative;
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
box-shadow:0px 0px 4px rgba(0,0,0,0.55);
-moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
-o-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
border-radius:3px;
z-index:500;
}
#menu li{
list-style-type:none;
display:block;
float:left;
margin:1em 0.8em;
}
#menu li a{
display:block;
text-decoration:none;
color:#F0F0F0;
font-size:1.6em;
margin:0;
line-height:28px;
text-shadow:0 2px 1px rgba(0, 0,0, 0.5);
}
#menu li a:hover{
/*transition:margin-top 0.3s;
-webkit-transition:margin-top 0.3s;*/
margin-top:2px;
}
#lt-corner{
width:0px;
height:0px;
border:50px solid;
border-color:#d9542b transparent transparent;
position:relative;
float:left;
top:1px;
left:-50px;
}
#lb-corner{
border:50px solid;
border-color:transparent transparent #d9542b;
width:0px;
height:0px;
position:relative;
float:left;
top:-40px;
left:-150px;
}
#rt-corner{
width:0px;
height:0px;
border:50px solid;
border-color:#d9542b transparent transparent;
position:relative;
float:right;
top:-107px;
right:-45px;
}
#rb-corner{
border:50px solid;
border-color:transparent transparent #d9542b;
width:0px;
height:0px;
position:relative;
float:right;
top:-149px;
right:-145px;
}
</style>
</head>
<body>
<div id="container">
<div id="lt-corner"></div>
<div id="lb-corner"></div>
<div id="navBar">
<ul id="menu">
<li><a href="#">✭ Home</a></li>
<li><a href="#">✭ About</a></li>
<li><a href="#">✭ Services</a></li>
<li><a href="#">✭ Contact</a></li>
</ul>
</div>
<div id="rt-corner"></div>
<div id="rb-corner"></div>
</div>
</body>
</html>
Here is a working example: JSbin . 这是一个工作示例: JSbin 。 Make sure to edit and play around with it.
一定要编辑和玩它。
Add margin:0
and padding:0
to html
& body
element. 添加
margin:0
和padding:0
到html
& body
元素。 To remove the bottom margin
, just remove the height:100%
from the body
element. 要移除底部
margin
,只需从body
元素中移除height:100%
。 So here's the basic CSS: 所以这是基本的CSS:
html,body{
margin:0;
padding:0;
}
html{
background:#77d5fb url('http://i.imgur.com/xbMWo.jpg') bottom center no-repeat;
height:100%;
width:100%;
}
body{
background:transparent url('http://i.imgur.com/2NPJi.png') top center no-repeat;
width:100%;
}
Side Note: Be sure to mark as the answer, if it solves your problem. 附注:如果它能解决您的问题,请务必将其标记为答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.