html - 在 HTML/CSS 中链接图像的问题

Question

我正在使用 HTML/CSS 制作我的第一个网站，但在制作页眉时遇到了一个小问题。在我网站的顶部，我有网站不同部分的 5 个名称。我想做到这一点，以便您可以单击每个名称的一般区域以转到该页面，并使用图像通过使用相对定位使它们与文本重叠并更改不透明度来实现这一点。

奇怪的是，我的标题中的一个名字有点歪，所以我在 h1 标签中使用了 transform: rotate() 来修复它，但现在图像(在一个完全不同的标签中)不再作为链接工作.只要我不旋转文本，所有其他图像都可以用作链接。

代码如下:

<header>

<img style="margin: -8px 0px 0px -10px" width="1520px" height="60px" 
src="Banner.jpg" alt="Banner">

<a href="index.html"><img style="position:relative; bottom: 65px; left: 
645px; opacity:0" width="195px" height="60px" src="Box.jpg" alt="Home"/></a>

<a href="GrowingUp.html"><img style="position:relative; bottom: 65px; right: 
145px; opacity:0" width="130px" height="60px" src="Box.jpg" alt="Growing 
Up"/></a>

<a href="Friendship.html"><img style="position:relative; bottom: 65px; 
right: -20px; opacity:0" width="130px" height="60px" src="Box.jpg" 
alt="Friendship"/></a>

<a href="Hobbies.html"><img style="position:relative; bottom: 65px; left: 
525px; opacity:0" width="105px" height="60px" src="Box.jpg" alt="Hobbies"/> 

<a href="Challenges.html"><img style="position:relative; bottom: 65px; left: 
695px; opacity:0" width="130px" height="60px" src="Box.jpg" 
alt="Challenges"/></a>


<h1 style="font-size:40px; margin: -120px 0px 0px 645px">Ryan's Life</h1>
<h1 style="font-size:24px; margin: -30px 0px 0px 55px">Growing Up</h1>
<h1 style="font-size:26px; margin: -28px 0px 0px 360px">Friendship</h1>
<h1 style="font-size:28px; margin: -29px 0px 0px 995px">Hobbies</h1>
<h1 style="font-size:28px; margin: -33px 0px 0px 1270px; transform: 
rotate(-0.5deg)">Challenges</h1>

</header>

Answer 1

使用 transform: rotate(); 来纠正 HTML 中歪曲的文本不是正确的方法，如果您使用只有您拥有的自定义字体，那么它只会为您歪曲。

如果你想覆盖文本、图像并以菜单的形式使用它，列表是可行的方法:

li {
  background-repeat:no-repeat;
  list-style-type: none;
}

li a {
  font-size:28px;
}

li.one,
li.two {
  margin-right: 10px;
}

/* If the have the same background */
li.one,
li.two,
li.three {
  background-image: url("https://via.placeholder.com/130x60");
  float: left;
  height: 30px;
  min-width:130px;
}

/* If the have different backgrounds */
/*
li.one,
li.two,
li.three {
  float: left;
  height: 30px;
  min-width:130px;
}
li.one {
  background-image: url("https://via.placeholder.com/130x60");
}
li.two {
  background-image: url("https://via.placeholder.com/130x60");
}
li.three {
  background-image: url("https://via.placeholder.com/130x60");
}
*/

ul:after
{
  content: "";
  display: block;
  clear: both;
}

<ul>
<li class="one"><a href="#">One</a></li>
<li class="two"><a href="#">Two</a></li>
<li class="three"><a href="#">Three</a></li>
</ul>

您可以更好地控制分离 html 和 css，以及更多选项。