为什么背景图像不能完全显示

why the background image not display completely?

本文关键字：显示 不能 背景 图像 为什么      更新时间：2023-09-26

你能告诉我为什么我的背景图像不能完全显示。它只显示到竞争对手为什么，我只有标题，所以它只显示背景图像的一小部分

这是我的代码 

.button-bar {
    padding:3% 20% 3% 20%;
}    
#wrapper{
    background-image: url(/login);
}

实际上我得到了答案，但是当我想给我的标题标签设置边距时，我的背景图像会下降，但我的标题仍然在顶部的相同位置。

看到这个

.headerTitle{
  margin-left:2%;
  margin-top:2%;
}

试试这个:

.button-bar {
    padding:3% 20% 3% 20%;
}    
#wrapper{
      background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
     min-height: 500px;
}

因为有背景的元素只和它里面的元素一样高。所以在你的包装器中只有一个h4元素有X个像素高，所以包装器也是X个像素高。

尝试在包装器中添加最小高度，并看到背景跟随。这样的:

#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/

你的css正在做你想做的事情....

#wrapper只是显示背景的小滑动器。如果你想让它占据整个页面，在css中使用.ionic-scroll而不是#wrapper

见图片:http://screencast.com/t/l1ptRRNaDs

尝试用.button-bar替换css中的#wrapper，然后尝试.ionic-scroll并查看结果

.ionic-scroll {
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}

如果你想在#wrapper中显示完整的图像，并且你知道图像的高度，你可以像这样设置#wrapper的高度和宽度:

#wrapper{
    height: 1000px;
    width: 1000px;
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}

如果你不知道你的图像的高度和宽度，我建议在#wrapper内使用<img>标签代替…这将导致#wrapper调整为图像的大小

相关文章：