如何使用按钮下载 HTML 格式的图像

Question

我的 PHP 和 HTML 网页中有一个图库，我想单击一个按钮，然后下载作为 div 背景发布的图像。这里的一个 div 对应一个图像，它包含在主 div 中。 将鼠标悬停在以图像为背景的 div 上后会显示下载按钮

代码是这样的，包括我的试验：

<div class="row">
  <div class="col-md-4 col-sm-4 text-center animate-box">
    <div
      class="work-grid"
      id="logosera"
      style="background-image: url(images/logo-biocentru.png);"
    >
      <img id="logosera" src="images/logo-biocentru.png" style="display:none" />
      <div class="desc">
        <h3><a href="#">Carti vizita</a></h3>
        <span class="cat">Graphic Design</span>
        <p>
          <span class="download">
            <a href="#logosera" download="biocentru.png">
              <i class="icon-download"></i>
            </a>
          </span>
          <span class="love">
            <a href="#"><i class="icon-heart"></i></a>
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

看起来像这样：

image before hover

image after hover

Answer 1

将图片文件路径放在href标签中：

<span class="download">
    <a href="biocentru.png" download="biocentru.png">
        <i class="icon-download"></i>
    </a>
</span>