虽然有许多问题涉及将背景图像转换为链接,或在 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);
}
最佳答案
<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 允许您包装标签
关于html - 将 Div 中的背景图片变成链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45764722/