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;

}

如何在离子中响应图像？

2 个答案: