Question

我已陷入相当困境。我有一个图像，我想要占用网页的背景。我希望它在屏幕宽度和高度上伸展，并保持这个大小。当我使用<img>标签时，我无法弄清楚如何在没有白条的情况下将其拉伸到屏幕。 wspace和hspace在HTML5中已弃用，因此不起作用。此外，我尝试将其实现为CSS样式，但我需要稍后使用jQuery淡出ENTIRE页面，并且将图像放入带有background-image的CSS中是不可能的。目前我正在使用它来实现图片：

<img class='background' src='Images/backgroundImg.jpg'/>

背景类如下所示：

.background {
                max-height:100%;
                max-width:100%;
            }

我应该添加什么才能使图片完全占用屏幕，并且仍然可以通过jQuery与它进行交互？谢谢你们！

Answer 1

无需最大高度和最大宽度，只需要高度和宽度以及定位。尝试：

.background {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

或者你想要一个粘滞的图像：

.background {
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

Answer 2

您可以尝试使用值cover的{{3}}属性。注意，请务必查看浏览器支持表，因为IE目前不支持它。

<强> object-fit

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

＆＃13;

<img src="http://lorempixel.com/400/200/sports">

＆＃13;

Answer 3

使用

background: url(../Content/Images/wallpaper.jpg) no-repeat center center fixed;
background-size: cover;//scretch image

Answer 4

好的，这就是你需要的一切：

    <style>
    html { 
      background: url(http://cdn7.viralscape.com/wp-content/uploads/2015/03/Manhattan-City-Line-at-night-New-York.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    </style>

您只需要更改其中的链接，并使用您要使用的图片的路径（Images/backgroundImg.jpg）！

编辑：

要淡化整个页面，您需要使用的是：

HTML：

<div id="overlay">

CSS：

#overlay{
    opacity:3;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    display: none;
}

然后您可以使用jquery将display: none;更改为display: inline-block;或其他任何内容！

删除HTML图像中的空白区域

4 个答案:

编辑：