填充的圖像

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

<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>