我的图像链接不起作用

Question

我正在尝试 link 图片，在 html 中看起来像这样：

<a href="#" class="image"><img src="logo.png"></a>

在 CSS 我有：

.baraMeniu a.image{
    display:block;
}

是的... display:block 只是让图像可点击的笨拙尝试。我是初学者，请循序渐进

编辑：忘了说我的图片有以下属性：

.baraMeniu img{
    width:100%;
    height:40em;
    position:absolute;
    z-index:0;/*the image*/
}
.baraMeniu a.image{
    /*the clickable image*/
}
.baraMeniu .st{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:left;
}
.baraMeniu .dr{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:right;
}

.baraMeniu #ind{
    text-indent:20px;
}

Answer 1

如果您尝试在图像周围包裹 <a> 标签，则不需要任何特殊技巧。

<a href="SomeLink.html"><img src="logo.png"></a>

那会很好。

您可以稍后使用 CSS 或 JS 更改其外观、悬停效果等。

为了清楚起见，请编辑。而不是通过页面上的元素来定位您的图像，例如a.img.classwhatever{} 为了简单起见，我只想给它一个 class 或在 div 中拍打它。将 CSS 应用于 class 或 ID。

<div class="ImageLink">
<a href="SomeLink.html"><img src="logo.png"></a>
</div>

关于Z-index，请慎重。负面意味着它落后于其他一切。

我的图像链接不起作用

My image-links won't work

image

hyperlink

clickable-image