angular - 如何在离子中响应图像？

Question

我正在创建一个离子应用程序，因为我需要在我的主页中添加一个背景图像。图像大小为1280*698.

我试过下面的代码，

CSS：

#homecontent {
  background-image: url('../img/home2.png') !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

HTML：

<ion-content id="homecontent"></ion-content>

我的问题是，背景图像没有响应。我怎样才能做到这一点？

Answer 1

你可以使用：

#homecontent{
    background:url('../img/home2.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

如果您想保持背景图像的纵横比，或者：

#homecontent{
    background:url('../img/home2.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

如果你的背景图像应该在高度和宽度上缩放

http://www.w3schools.com/cssref/css3_pr_background-size.asp和http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Answer 2

在您的 CSS 中进行以下更改：

#homecontent{

    background:url('../img/home2.png')no-repeat center center fixed !important;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;

}