Question

你能否告诉我为什么我的背景图片没有完全显示。它只显示为什么？我只有标题，因此它只显示背景图像的一小部分

这是我的代码

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

其实我得到了答案但是当我试图给我的标题标签留出边距时，我的背景图片会降下来。但是我的标题标题保持在同一位置上。

看到这个

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

Answer 1

试试这个：

String str = "cute";
List<String> matchingKeys = map.entrySet().stream().filter( e -> e.getValue().contains(str))
  .map(e -> e.getKey()).collect(Collectors.toList());

Answer 2

你的CSS正在按照你的要求去做....

#wrapper只是显示背景的小滑行。如果您希望它占用整个页面，请使用css中的.ionic-scroll而不是#wrapper

见图：

http://screencast.com/t/l1ptRRNaDs

尝试使用#wrapper替换css中的.button-bar，然后尝试.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);
}

如果您不知道图片的高度和宽度，我建议您使用<img>内的#wrapper标记代替...这会导致#wrapper调整为大小图像

Answer 3

因为具有背景的元素仅与其中的元素一样高。所以在你的包装中只有一个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/

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

3 个答案: