Question

我添加了一个指向6个图像的链接，其中还包含指向文本的链接。但是图像旁边的空间也是可点击的，我不想要。

的CSS：

#testimage a {width: 100%;  height: 100%;display: block;}
#testimage1 a {width: 100%;  height: 100%;display: block;}
#testimage2 a {width: 100%;  height: 100%;display: block;}
#testimage3 a {width: 100%;  height: 100%;display: block;}
#testimage4 a {width: 100%;  height: 100%;display: block;}
#testimage5 a {width: 100%;  height: 100%;display: block;}
#testimage6 a {width: 100%;  height: 100%;display: block;}

  #a1 a
 {position: absolute;font-size: 25px;fcolor: #085da2;top: 503px;}
 #a1 a:hover
 {color:#085da2;opacity:0.5;}

正如您将看到链接对图像无法正常工作。因为我只想要图像和文本链接，没有别的，没有空格！

任何想法

Answer 1

有几种方法可以做到这一点。

Codepen Demo（两者都是）

首先，只需在div中使用一个简单的锚标记，并将文本放在标题标记

中

<强> HTML

<div class="bg-image">
  <a href="#"><h3>Events</h3></a>
</div>

<强> CSS

.bg-image a {
  height: 205px;
  width: 322px;
  border-style: solid;
  border-width: 3px;
  border-color: #9ad499;
  margin-bottom: 7px;
  border-radius: 10px;
  position: relative;
  display:block;
  text-decoration:none;
  background-image: url(http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg);
}

.bg-image a h3 {
  position:absolute;
  text-align:center;
  width:100%;
  bottom:0;
  color:black;
}

另一个依赖于更多结构和内嵌图像（即在HTML本身中）

<强> HTML

<div class="inline-image">
  <a href="#">
    <img src="  http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg" alt="" />
    <h3>Events</h3>
  </a>
</div>

CSS 类似于一些更改

.inline-image a {
  display: block;
  margin-left:10px;
  border-style: solid;
  border-width: 3px;
  border-color: #9ad499;
  margin-bottom: 7px;
  border-radius: 10px;
  position: relative;
}

.inline-image img {
  display: block;
  border-radius: 10px;
}

.inline-image a h3 {
  position:absolute;
  text-align:center;
  width:100%;
  bottom:0;
  color:black;
}

仅添加了图像和文本的链接

1 个答案: