Question

如何在我的网站上全屏显示图片？我已经尝试了很多方法，但仍然无法做到正确。

我这样做了：

    width: 100%;
height: 100%;
text-align: center;
background:url(images/top.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

而且，一切都没问题，但为了使它全宽，我必须插入大量的文字或
来改变图片的高度...

比我试试这个：

width: 100%;
height: 100%;
text-align: center;
position: absolute;
background:url(images/top.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
min-width: 100%;
min-height: 100%;

这种方法很完美，但是当我在第一个DIV下添加第二个DIV时，我的第二个DIV就在我的第一个DIV上......

所以问题是，如何在我的网站上制作全屏图片！我希望有100％的高度和100％的宽度，当我添加第二个DIV时，一切都将在第一个DIV之下。

感谢您的帮助。

Answer 1

{
position: absolute;
background-image: url(images/top.png);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: value;
}

z-index属性指定元素的堆栈顺序。

Answer 2

您的问题是您将图像作为背景图像插入。这自动意味着其他元素适合它的顶部。请尝试使用img标记：

<img src='myimg.png' height='100%' width='100%' />

您还可以添加一些CSS以确保其大小合适：

body img {
    height:100%;
    min-height:100%;
    width:100%;
    min-width:100%;
}

您添加的任何其他元素现在都会插入到图像下方。

希望这有帮助。

CSS3图片全屏

2 个答案: