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

Posted 2023-03-05

【中文标题】悬停时 HTML 文本出现在图像上方

【英文标题】：HTML Text Appears Over Image On Hover

【发布时间】：2016-06-09 23:12:10

【问题描述】：

当我将鼠标悬停在图像上时，我一直在努力让图像动画化。我找到了很多示例，但是我发现它们难以实施和调整以适应我想要的方式。这是我的代码：

 #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% 来查看整个内容，然后调整高度以便图像仍然是正确的高度到宽度，所以它没有扭曲。当您使用普通图像执行此操作时，它会自动执行此操作，只需设置宽度即可，但作为背景则不会。

【问题讨论】：

这有点难说，但我认为一种解决方案可能是将#cover 设置为基于其父级的绝对定位（父级还需要position: relative 才能工作）。如果您随后将#cover 设置为width: 100%; height: 100%;，它将覆盖其父元素。

不走运，我都试过了，只是因为某种原因使图片不可见？当我悬停时，文字仍然出现，但后面没有图像。还是谢谢。

应该可以使用 padding-bottom hack 轻松解决。向我们展示您的尝试，而不是仅仅说“它不起作用”。

从您提供的代码来看，您的问题似乎在于您没有为box div 分配高度。结果，您的 box div，即您分配背景图像的 div，仅采用其子元素的高度 - 即您的 span 文本的 font-size。您的网站什么时候需要调整图片的高度？图片是用作背景图片（被子元素覆盖），还是您希望它完全显示在页面上？

【参考方案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/