Javascript 在CSS包装中添加指向另一页的图像的超链接

我在HTML主页上有三个图像。我希望用户能够点击图片转到另一个页面。到目前为止，我有：

#features ul li.feature-1 {
    background: url('../images/pavilion_small.png') no-repeat top center;
}
#features ul li.feature-2 {
    background: url('../images/dtc_small.png') no-repeat top center;
}
#features ul li.feature-3 {
    background: url('../images/downtown_small.png') no-repeat top center;
}

我有点困惑如何将图像链接到另一个页面。我在网上查了一些关于它的东西，但由于我对它还比较陌生，它们对我来说似乎有点困惑。有人能解释一下我应该做什么来完成这个任务吗？谢谢

另外，这是我的HTML：

<div id="features">
        <p id="homeValue"></p>
        <h3>Find Out What Your Home is Worth</h3>
        <center><h4>Begin by clicking your town name</h4></center>
        <div class="wrapper">
        <ul>
            <li class="feature-1">
            <h4><a href="https://d.github.io/Real-Estate/a.html">A</a></h4> <!-- This links only the text to the appropriate page -->
            <p>sdfhsfkjs</p>
            </li>
            <li class="feature-2">
            <h4>B</h4>
            <p>sfkljsfklsjf</p>
            </li>
            <li class="feature-3">
            <h4>C</h4>
            <p>sdfkljsdlkfj</p>
            </li>
            <div class="clear"></div>
        </ul>
        </div>
    </div>

看看你的房子值多少钱
首先单击您的城镇名称


sdfhsfkjs



B
sfkljsfklsjf



C
sdfkljsdlkfj

您可以将图像保存在锚定标记中

<li>
    <a href="https://yoursite.com/yourlink">
        <img alt="image" src="https://www.yoursite.com/images/youimage.png">
    </a>
</li>

或样式表中的图像

<li class="feature-1">
    <a href="https://yoursite.com/yourlink"></a>
</li>

---

但这里的问题是图像不在标签中

您可以将

li

内容包装在

a

标签中。您仍然可以获得背景图像的好处，但整个内容块将链接到一个新的URL：

#功能ul li.feature-1{
背景：url（'https://via.placeholder.com/200x200’）没有重复的上止点；
}
#功能ul li.feature-2{
背景：url（'https://via.placeholder.com/200x200’）没有重复的上止点；
}
#功能ul li.feature-3{
背景：url（'https://via.placeholder.com/200x200’）没有重复的上止点；
}
#特写ulli a{
显示：块；
}

看看你的房子值多少钱
首先单击您的城镇名称

请添加您的HTML。CSS只是我们需要的一半。请阅读。您可以使用锚定标记

@disis，对此表示抱歉。。。完成！是的，在中添加一个标记，然后您可以使用alt文本使其更易于访问。@Ryano如果图像仅用于演示和装饰，则不一定要作为背景图像访问。如果背景图像包含对显示的信息很重要的文本，那么使用内联alt文本是合适的。