填充图像

Question

我想做这样的事情：

但是我不能把形状放在正确的位置，并且总会有几个像素超出：

这是我的CSS：

div.elec {
    position: relative;
    margin: 30px 0; 
    margin-bottom: 30px;
}

div.elec img {
    width: auto;
    height: auto;
    max-width: 100%;
    box-shadow: 0px 2px 20px grey;
}

#descrielec {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 490px;
    text-align: center;

    background-color: rgba(249, 249, 249,0.6);
    color: white;
    font-size: 1em;
}

我的HTML：

<div class="elec">
    <img src="./SI-Facile_files/elec.png">
    <div id="descrielec">
        <br/><br/>
        <h4><a>Electronique</a><br/>Ces leçons qui traiteront sur les calculs, codages, branchements, graphiques, etc... vous seront
        très utiles afin de passe dans les meilleures conditions votre années
        de SI en terminale.</h4><br/><br/><a
        href="./SI-Facile_files/Cours.html"><h6>Cliquez-ici pour voir les
        leçons</h6></a><br/><a href="./SI-Facile_files/QCM.html"><h6>Ou ici
        pour vous testez</h6></a>
    </div>
</div>

Answer 1

＆＃13;

＆＃13;

<style>
    div.elec {
        position: relative;
        margin: 30px 0;
    }
    div.elec img {
        width: auto;
        height: auto;
        max-width: 100%;
        box-shadow: 0 2px 20px grey;
    }
    #descrielec {
        margin-left: 550px;
        position: absolute;
        margin-bottom: 49px;
        bottom: -9%;
        height: 485px;
        width: 50%;
        text-align: center;
        background-color: rgba(249, 249, 249, 0.6);
        color: #FFF;
        font-size: 1em;
    }
</style>

<div class="elec">
    <img src="https://i.stack.imgur.com/6DCcn.jpg">
    <div id="descrielec">
        <br/>
        <br/>
        <h4><a>Electronique</a><br/>Ces leçons qui traiteront sur les calculs, codages, branchements, graphiques, etc... vous seront très utiles afin de passe dans les meilleures conditions votre années de SI en terminale.</h4>
        <br/>
        <br/>
        <a href="./SI-Facile_files/Cours.html">
            <h6>Cliquez-ici pour voir les leçons
            </h6>
        </a>
        <a href="./SI-Facile_files/QCM.html">
            <h6>Ou ici pour vous testez</h6>
        </a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;