Question

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

奇怪的是，标题中的名称之一有些歪斜，所以我在h1标签中使用了transform：rotation（）来修复它，但是现在图像（在完全不同的标签中）不再可以用作链接了。只要我不旋转文本，其他所有图像都可以用作链接。

代码如下：

<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的分离，还有更多选项。

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

1 个答案: