将 Div 中的背景图像转换为链接答案

【问题标题】：Turning Background Image within Div into a Link将 Div 中的背景图像转换为链接
【发布时间】：2018-01-27 14:48:10
【问题描述】：

虽然有许多问题涉及将背景图像转换为链接或在 div 中创建链接，但我很难找到在 div 中链接背景图像的解决方案。具体来说：https://jsfiddle.net/pmcgswf4/5/。理想情况下，当用户选择图像或标题时，它应该将他们带到“personal_project_pages/crazyhearts.html”。

谢谢！

html:

    <li>
        <div id="crazyhearts">
            <div class="projects">
                <h2><a href=personal_project_pages/crazyhearts.html class = "alpha"> Crazy Hearts Cutting Board </a></h2>
            </div>
        </div>
    </li>

CSS：

/* Projects */
.projects {border-style: solid;
    width: 99.5%;
    height: 100%;
    /**  min-width: 630px;   **/
    min-height: 200px;
}

#crazyhearts {
    background:url("https://c1.staticflickr.com/5/4321/36112755175_f7f9ba8b84_b.jpg") no-repeat 0% 30%;
    background-size: cover;
    width: 100%;
    position: relative;
}

a {
  color: #214E34;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h2 {
  color: whitesmoke;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.9);
}

【问题讨论】：

标签： html css background-image href

【解决方案1】：

<li>
  <div id="crazyhearts">
    <a href="personal_project_pages/crazyhearts.html" class = "alpha">
        <div class="projects">
            <h2> Crazy Hearts Cutting Board </h2>
        </div>
    </a>
  </div>
</li>

您在 href 属性周围缺少 " "，而 HTML5 允许您包装标签

【讨论】：

【解决方案2】：

HTML5 允许您将 div 包装在锚标记中。

    <li>
      <div id="crazyhearts">
        <a href=personal_project_pages/crazyhearts.html class = "alpha">
            <div class="projects">
                <h2> Crazy Hearts Cutting Board </h2>
            </div>
        </a>
      </div>
    </li>

【讨论】：