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％之前，它会使高度正确。但是现在我使用的是背景图像，我无法自动设置高度，只需要将鼠标悬停在上面时显示的文本大小。我希望这是有道理的，谢谢！

编辑我想如果这不起作用，任何人都可以指出另一种方法，我可以做同样的事情吗？

UPDATE 这就是我试过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/

HTML文本在悬停时显示在图像上

1 个答案: