Question

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

    <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>

Answer 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}

<a href="main.html" class="urlImg" title="Come inside!"></a>

（同样在整页上看）

您还可以使用绝对或固定定位（在评论中提及@abhishek），使其行为方式相似。

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

1 个答案: