悬停时 HTML 文本出现在图像上

Question

当我将鼠标悬停在图像上时，我一直在努力尝试让图像动画化。我找到了很多示例，但是我发现它们很难实现并根据我的需要进行调整。这是我的代码:

 #box {
   width: 100%;
   border-radius: 5px;
   box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
   background: url("http://placehold.it/1080x720");
   background-size: cover;
 }
 #cover {
   background: rgba(0, 0, 0, .75);
   text-align: center;
   opacity: 0;
   -webkit-transition: opacity 1s ease;
   -moz-transition: opacity 1s ease;
 }
 #box:hover #cover {
   opacity: 1;
 }
 #text {
   font-family: Arial;
   font-weight: bold;
   color: rgba(255, 255, 255, .84);
   font-size: 60px;
 }

<div id="box">
  <div id="cover">
    <span id="text">Comics</span>
  </div>
</div>

设置高度时我的困难来了，我的网站需要能够重新调整图像的大小；在我将图像的宽度(而不是现在的背景图像)设置为 100% 之前，它会使高度适合宽度。但是现在我使用的是背景图像，我无法让它自动设置高度，它只需要将鼠标悬停在上面时出现的文本大小。我希望这是有道理的，谢谢!

编辑我想如果这行不通，谁能指出我可以做同样事情的另一种方法？

更新这就是我尝试以 Kaan 为例时发生的情况。

#box {
   width: 100%;
   border-radius: 5px;
   box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
   background: url("http://placehold.it/1080x720") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }
 #cover {
   background: rgba(0, 0, 0, .75);
   text-align: center;
   opacity: 0;
   -webkit-transition: opacity 1s ease;
   -moz-transition: opacity 1s ease;
 }
 #box:hover #cover {
   opacity: 1;
 }
 #text {
   font-family: Arial;
   font-weight: bold;
   color: rgba(255, 255, 255, .84);
   font-size: 60px;
 }
#ContainerTest{
  width: 40%;
  }

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
  $(window).load(function(){
    var height = $(window).height();   // returns height of browser viewport
    $("#box").css({'height': height + 'px'});
    $("#cover").css({'height': height + 'px'});
});

function resizeContent(){
    var newWidth = $(window).width();
    var newHeight = $(window).height();

    $("#box").height(newHeight).width(newWidth);
    $("#cover").height(newHeight).width(newWidth);
}

$(window).resize(function() {
    resizeContent();
});
</script>
<div id="ContainerTest">
<div id="box">
  <div id="cover">
    <span id="text">Comics</span>
  </div>
</div>
</div>

这确实有效，但我需要让自己更清楚我真正想要它做什么。你看我有一个占屏幕 40% 的容器，然后我想让这个图像适合它，这样你就可以通过将图像的宽度设置为 100%，然后调整高度来看到整个图像仍然是正确的高度到宽度，所以它没有扭曲。当您对普通图像执行此操作时，它会自动执行此操作，只需设置宽度即可，但作为背景则不会。

Answer 1

通过使用 jQuery，您可以解决这个问题。

$(window).load(function(){
    var height = $(window).height();   // returns height of browser viewport
    $("#box").css({'height': height + 'px'});
    $("#cover").css({'height': height + 'px'});
});

function resizeContent(){
    var newWidth = $(window).width();
    var newHeight = $(window).height();

    $("#box").height(newHeight).width(newWidth);
    $("#cover").height(newHeight).width(newWidth);
}

$(window).resize(function() {
    resizeContent();
});

您还需要使用以下代码更改您的#box CSS。

#box {
   width: 100%;
   border-radius: 5px;
   box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
   background: url("http://placehold.it/1080x720") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

它会起作用的。这是解决方案的 jsfiddle 链接:https://jsfiddle.net/fL0n3mcj/1/