为链接到图像的链接拉出不同样式，从而导致不必要的图层

Question

我需要更新一个高度定制的WP网站，以添加SecureTrust徽标，并在该页脚中的其他经过认证的印章旁边的特定位置链接该网站。

我试图将JavaScript插入footer.php，但无法正常工作/未被识别。作为解决方法，我编辑了样式css以显示SecureTrust徽标，然后在html中添加了锚点以放置链接。

<div class="logo-box"> 
   <span class="example1"></span>
   <span class="iata"></span>
   <span class="securetrust">
      <a href="https://certs.securetrust.com/" target="_blank" rel="noopener" title="SecureTrust"><img src="https://companyname/wp-content/uploads/2020/08/tc-seal-blue46.png"></a></span>
</div>

.securetrust{
    text-indent: -999999px;
    background: url(images/tc-seal-blue46.png) no-repeat scroll left top rgba(0, 0, 0, 0);
    background-size: contain;
    display: inline-block;
    height: 46px;
    width: 100%;
    margin-left: 8px;
    max-width: 93px;
}

SecureTrust徽标现在就位，但是“链接”正在连接到媒体样式并拉出站点徽标，而不是CSS中的.securetrust样式。如果有帮助，请附加图像。

有没有一种方法可以使链接拉出CSS图像？我也尝试过单独上传图片，并直接通过a href将其拉出，但它不起作用。

Answer 1

父div上的logo类引起了该问题，因此，请消除该问题，或者如果由于某种原因需要保留它，请尝试以下操作。

您需要一个将覆盖站点徽标类的类。 因此，请使用.logo .securetrust作为CSS选择器，而不仅仅是.securetrust，并将其securetrust放在链接上，而不是跨度上。

HTML

<div class="logo col-md-6 col-sm-12"> <!-- <- logo is problem class -->
  <div class="logo-box">
    <span>
      <a href="sealserver.trustwave.com/…" class="securetrust" target="_blank" rel="noopener" title="SecureTrust">
        <img src="worldgo.ca/wp-content/uploads/2020/08/…>
      </a>
    </span>

CSS

// to hide the site logo
.logo .securetrust {
  background: none;
}
// set the size and alignment of the image as required
.logo .securetrust img {
  width: 70px;
  vertical-align: top;
}