Question

我正在创建一个网页，想知道当我将文本悬停在一部分文本上（跨度）时，如何将其保持在其位置并使图像显示在背景中，以便文本可以越过它。 / p>

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

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

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

如何修复“将文本悬停在图像上，文本保持其原始位置，并且img在背景中发生变化”

2 个答案: