为什么我的背景图像被放大？

我试图设置1920 * 1080的背景图像，并且出于某种原因图片正在放大并且正在裁剪。为什么我的背景图像被放大？

另外，我想知道是否有可能将<navbar>设置为不覆盖背景的顶部。有没有把它分开的机会？

这是我的CSS文件背景设置：

body { 
    background: url(images/back.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

body, 
html { 
    font-family: 'Caveat Brush', cursive; 
    color: white; 
}

这是image looks like on my browser如何：

谢谢。

来源

2017-02-14 Eyal Younger

如果你尝试'高度：1920;宽度：1080px;'？ – WasteD

仍然是一样的没有变化 –

这是因为您正在使用background-size：cover; 这将缩放背景图像以适应它所在的html元素的宽度和高度，同时拉伸和/或裁剪图像。考虑到导航栏：如果你在你的HTML导航栏，它有例如50像素给定的高度只需添加

body { 
    padding-top: 50px; 
    background-position: top 50px center; 
}

到你的CSS

来源

2017-02-14 10:05:27 d3orn

增加margin-top到身体不会修复它..因为navbar将在体内。您可以使用填充，并说背景位置：顶部50px中心。 –

嗯你是对的我会编辑我的答案 – d3orn

所以我应该写什么代码而不是背景大小：覆盖 –

根据您的建议做一些改变后，导航栏本身随着paddding越来越低（图片将被附上）。

的HTML代码是：

</head> 
    <body> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Eyal Younger </a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">HTML COURSE</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

CSS代码：

body { 

    padding-top: 50px; 
    background-position: top 50px center; 
    background: url(images/back.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: height: 1920 width: 1080px; 

} 

body, 
html { 

    font-family: 'Caveat Brush', cursive; 
    color:white;  
} 

h1 { 
    font-weight: 700; 
    font-size: 5em; 

} 

h3 { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-top: 5px; 
    margin-bottom: 10px; 


} 

#mainimg { 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    border: 8px double red; 
    box-shadow: 5px 5px 6px #353232; 

} 



.content { 
    padding: 6%; 
    text-align: center; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.9), 
       0px 8px 13px rgba(0,0,0,0.1), 
       0px 18px 23px rgba(0,0,0,0.1); 


}

enter image description here

来源

2017-02-14 10:26:08

试试这个为全背景图像

body{ 
margin: 0; 
background:url('images/back.jpg') no-repeat fixed 0 -300px; 
background-size:100%;

来源

2017-02-14 10:45:06

哇，从背景中明确分离导航栏，谢谢你！但是有没有什么能够保持背景图像的真实比例？ –

我也是初学者，所以我不完全确定，不确定这是不是你正在寻找的东西，但你可以沿着x轴和y轴移动图像，让它看起来像你想要的样子（我编辑过上面的帖子）如果我可以看到页面的截图，以便我可以更好地了解发生了什么 –

这是一个链接，示例它在我的浏览器中的外观以及它如何改变我的背景图片的比例 https://i.stack.imgur.com/5Y87Q.jpg –

这是它如何放大我的背景图像 How it looks like

来源

2017-02-14 13:27:55

为什么我的背景图像被放大？

回答

相关问题