0
votes

Faire une image complète de div

J'essaie de créer une DIV opaque avec une légère couleur sur une image. Je ne peux pas sembler l'obtenir pour s'adapter exactement sur toute l'image. J'ai essayé tant de variations différentes et ce qui suit est le meilleur que je puisse arriver. Je sais que c'est probablement quelque chose de simple mais je pense avoir besoin d'aide lol.

<div class ="cover">
    
</div>

<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">

html css opacity

2 commentaires

Avez-vous essayé d'utiliser l'image comme arrière-plan?

Merci, une bonne alternative!

5 Réponses :

1
votes

Vous devez envelopper la couverture div et l'image avec un autre div et définir sa position pour être relatif. Ensuite, vous devez définir la hauteur et la largeur de l'image à 100% pour remplir le wrapper div et vous devez également définir la position DIV de la couverture pour être absolue et développer tout le wrapper div.

Si vous souhaitez définir la coutume. Hauteur et largeur de l'image, vous devez définir ces propriétés sur Wrapper Div. P>

 <div class='wrapper'>
        <div class ="cover">

        </div>
        <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg">
    </div>

1 commentaires

OMG! vient de voir votre solution sa même que la mienne: p +1

0
votes

Je pense que c'est ce que vous voulez, fondamentalement, j'ai ajouté un conteneur pour l'image et la div et forcé la position div pour être relatif à conteneur code>

  code>  code>   p> 


<div class="container">
  <div class ="cover">

  </div>

  <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

0 commentaires

1
votes

Vous n'avez pas besoin d'utiliser IMG Utilisez une couleur d'arrière-plan img.

https://jsfiddle.net/ HU3WFC76 / P>

<div class ="cover">
  <div >
  </div>   
</div>


.cover{
 background-color: blue;   
 background:url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg) no-repeat;
 background-size:cover;
 width: 100%;
 height: 200vh;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0.5;
 --filter:blur(10px);
}
.cover div{
  background:blue;
  width:100%;
  opacity:0.5;
  height:100%;
}

0 commentaires

0
votes

Vous pouvez utiliser des éléments pseudo avec un arrière-plan comme alternative à un autre élément si vous n'avez pas besoin de texte alt sur cette image. XXX PRE> XXX < / Pré>

https://codepen.io/koralArts/pen/rwpbwvd << / p>

0 commentaires

0
votes

Un moyen simple de donner une superposition une image entière. Enveloppez l'image dans un DIV et faites avec CSS Pseudo Code> Sélecteur. Tout comme ci-dessous

p>



  <div class ="cover">
      <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

0 commentaires