css怎么以图片为链接

在网页中，经常会用到图片来作为链接，让用户可以通过点击图片跳转到另一个页面。那么，如何用CSS来实现这个效果呢？ 首先，需要在HTML代码中加入一个链接标签，并在其中添加一个img标签，如下所示：

请点击以下图片：

接下来，可以使用CSS来美化这个链接图片。首先，需要把a标签中的下划线去掉，让其变成一个纯粹的图片链接。可使用text-decoration属性，如下所示： a { text-decoration: none; } 接下来，可以修改鼠标悬浮在图片上时的效果，让其变成手型，并添加一个渐变的背景色，如下所示： a:hover { cursor: pointer; background: linear-gradient(to right,#ffecd2,#fcb69f); } 最后，如果需要让图片链接水平居中，可以给a标签添加一个display属性，并设置为inline-block，如下所示： a { text-decoration: none; display: inline-block; text-align: center; } 这样，就可以实现一个美观的图片链接了。 完整代码如下：

<p>请点击以下图片：</p>
<a href="http://www.example.com"><img src="example.jpg" alt="示例图片"></a>

<style>
a {
   text-decoration: none;
   display: inline-block;
   text-align: center;
}

a:hover {
   cursor: pointer;
   background: linear-gradient(to right,#fcb69f);
}
</style>