如何修复“将文本悬停到图像，文本保持其原始位置和背景中的 img 变化”答案

【问题标题】：How to fix 'Hover text to image, text keeps it's original position and img changes in background'如何修复“将文本悬停到图像，文本保持其原始位置和背景中的 img 变化”
【发布时间】：2020-01-12 01:24:54
【问题描述】：

我正在创建一个网页，并且想知道当我将鼠标悬停在文本的一部分（跨度）上时，如何将其保持在其位置并使图像出现在背景中，以便文本可以覆盖它。

HTML：

   <html>

    <link REL=StyleSheet HREF="HOVERTEST_02.css" TYPE="text/css" MEDIA=screen />

    <h1>FS STUDIO</h1>

    <h2><span>Automation(FS1920)</span>.
        <img src="https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg"/>
    </h2>

<h2><span>Platforms(1819)</span>
    <img src="https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg"/>
</h2>

CSS：

img{
    display:none;
}

span:hover + img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    height: 600;
    width: device-width;
    opacity: 0.8;
}

【问题讨论】：

标签： html css image background hover

【解决方案1】：

你的意思是对的吗？

 span.one:hover{
 	 	background-image: url('https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg');
 	 }
 	 span.two:hover{
 	 	background-image: url('https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg');
 	 }

 <h1>FS STUDIO</h1>

    <h2><span class="one">Automation(FS1920).</span>
        
    </h2>

<h2><span class="two">Platforms(1819)</span></h2>

【讨论】：

不是真的，我的意思更像是这个参考：saratilgaard.com（我希望允许发布现有作品）。因此，当您将鼠标悬停在标题上时，图像会出现在网站的固定位置。

【解决方案2】：

图片不改变文字位置，需要设置position: absolute。

像这样，图片会忽略页面中的其他元素，让文字显示出来，见上面的快速演示：

更新版本

img{
    display:none;
    width: 50vw;
    height: 40vw;
    position: absolute;
    top: 5vh;
    right: 10vw;
}

span:hover + img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    height: 600;
    width: device-width;
    opacity: 0.8;

}

  <h1>FS STUDIO</h1>

  <h2><span>Automation(FS1920)</span>.
      <img src="https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg"/>
  </h2>

<h2><span>Platforms(1819)</span>
  <img src="https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg"/>
</h2>

【讨论】：

哦，好的，太棒了！但是如何让每张图片与另一个链接中的图片保持在完全相同的位置呢？因为现在它仍然跳了一点，还是因为图像大小？（试图获得与此参考类似的东西：saratilgaard.com）
这是因为高度/宽度以及图像的定位，看看更新的版本，我想你可以从那里开始工作。只需调整图像大小的宽度/高度和图像定位的顶部/右侧 :)
太棒了！非常感谢，我注意到的最后一件事是图像覆盖了文本，当我悬停时，是否可以在文本的背景中获取图像？
我不确定我是否理解正确，但这里有一个代码笔，看起来更像你展示的参考：codepen.io/pedro-figueiredo/pen/KKPoyxZ
非常感谢codepen，它很有帮助！目前我唯一还在苦苦挣扎的是，文本仅可见，因为图像的不透明度为 0.8。有什么办法可以将文本作为“顶层”并将图像作为第二层（在后面），同时让图像完全不透明？