时间戳

首页 > 解决方案 > 文字不会超过图像

html - 文字不会超过图像

问题描述

我是 CSS 的新手，我正在为班级做一个博客项目。我正在尝试拥有它，以便在图片底部有一张带有文字的图片。我正在尝试让图片和文字都可以点击。出于某种原因，图片似乎正在按下文本框，我不知道为什么。

    #container{
        display: grid;
        height: 87vh;
        width: 100vw;
        grid-template-columns: 40vw 25vw 25vw;
        grid-template-rows: 42.5vh 42.5vh;
        grid-template-areas: 
        "left middle right"
        "left middleRight bottomRight";
        grid-gap: 10px;
        padding: 1px;
        justify-content: left;
        background-color: thistle;
    }

#MainblogPost{
    border:solid;
    border-color: grey;
    height: 86vh;
}
#image{
    width: 100%;
    height: 100%;
}
#blogLink{
    display: grid;
    position: absolute;
    bottom: 50px;
    font-size: 20px;
    color: turquoise;
}

HTML

    <div id="container">
        <div id = "MainblogPost">
            <a  href="google.com"><img id="image" src="resources/ironman.jpg"/>
            <a  href="google.com" id ="blogLink">Iron man</a>
            </a>
        </div>

标签： htmlcss

解决方案

根据你的标题，我猜你的意思是在图像上显示你的文字......为此，请使用这个

#image{
z-index: -10; 
}
#bloglink{
z-index: 10000;
}

基本上 z-index 所做的是覆盖对象或以 3d 顺序组织对象，将其覆盖在元素上方或元素中。如果您有任何问题，请发表评论

推荐阅读