如何调整悬停图像以使其始终全屏显示？

【问题标题】：How do I adjust a hover image so that it is always full screen?如何调整悬停图像以使其始终全屏显示？
【发布时间】：2015-08-02 07:57:51
【问题描述】：

我正在设置一个图像，当你将鼠标悬停在它上面时它会发生变化。我希望图像可以调整，以便在任何屏幕上全屏显示。我没有放置像素大小，而是尝试放置百分比大小，但没有显示任何内容。有没有更好的方法来完成这项工作？

    <style type="text/css"> 
    .urlImg { 
        display:block; 
        width: 1000px;
        height: 848px;
        background-image: url('01.jpg'); 
        background-repeat: no-repeat;
        } 
    .urlImg:hover { 
        background-image: url('02.jpg'); 
        background-repeat: no-repeat;
        } 
    </style>
  </head>
  <body>
        <center><a href="main.html" class="urlImg" title="Come inside!"></a></center>
  </body>

【问题讨论】：

如果您想在悬停时展开图像（使其覆盖整个视图），请使用position: fixed; 属性developer.mozilla.org/en-US/docs/Web/CSS/position

标签： html css image fullscreen

【解决方案1】：

使用background-size 并结合 100% 的宽度和高度（确保主体也延伸到 100%）：

.urlImg {
  display: block;
  width: 1000px;
  height: 848px;
  background-image: url('http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png');
  background-repeat: no-repeat;
}
.urlImg:hover {
  width: 100%;
  height: 100%;
  background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
html, body {height: 100%; margin: 0}

&lt;a href="main.html" class="urlImg" title="Come inside!"&gt;&lt;/a&gt;

（也可以在整页上查看）

您还可以使用绝对定位或固定定位（正如评论中@abhishek 提到的那样）以使其表现类似。

【讨论】：