2

Primero muchas gracias por el trabajo que hacéis. No sabéis cuanto nos ayudáis a los que estamos empezando. Estoy intentando poner una capa sobrepuesta con el método :before encima de una imagen redonda y que quede ajustada perfectamente. Le pongo las mismas propiedades que a la imagen redonda pero por arriba sale un poco y no se a que es debido. Llevo un rato intentándolo y no se a que es debido.

introducir la descripción de la imagen aquí

El código html5 es este:

<div class="contenedor quienSoyGeneral">


        <div class="quienSoy">
            <img src="img/evento-cumpleaños.jpg" class="quienSoy__img" alt="icono privado">

        <section class="quienSoy__section">
                <h3 class="quienSoy__section-h3">mi misión</h3>
                <p class="quienSoy__section-p1">hacer que tu día sea inolvidable</p>
                <p class="quienSoy__section-p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
                    accusamus aspernatur porro nobis neque! Magnam laboriosam, veniam illum corrupti in sint eaque,
                    non, quia totam corporis quis libero dolore provident.</p>
            </section>
        </div>

ESTE ES EL CÓDIGO DE CSS3:

    .quienSoyGeneral{
     padding: 20px 0;
     position: relative;
 }
 .quienSoy__section{
    padding: 20px 0;
 }
 .quienSoy:before{
     content:"";
    height: 225px;
    width: 250px;
    border-radius: 50%;
    background-size: 100% auto;  
    display: block;
    background-color: rgba(0,0,255,.2);
    z-index: 5000;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left: 0;
    margin: 0 auto;

 }


 .quienSoy__img{
    height: 225px;
    width: 250px;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;  
    display: block;
    margin: 0 auto;

 }

Muchísimas gracias.

1 respuesta 1

3

Las dimensiones las tienes que poner en el contenedor que tiene la imagen. Y hacer que la imagen ocupe el 100% del contenedor padre. Si indicas las dimensiones en el contenedor padre así el ::before se dimensionará según el padre.

.quienSoyGeneral {
  padding: 20px 0;
  position: relative;
}

.quienSoy__section {
  padding: 20px 0;
}

.quienSoy {
  height: 225px;
  width: 250px;
  background-position: 50%;
  border-radius: 50%;
  background-size: 100% auto;
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.quienSoy:before {
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  display: block;
  background-color: rgba(0, 0, 255, .2);
  z-index: 5000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}


.quienSoy__img {
  height: 100%;
  width: 100%;
}
<div class="contenedor quienSoyGeneral">


  <div class="quienSoy">
    <img src="https://images.unsplash.com/photo-1591653979218-8105a74a4d55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="quienSoy__img" alt="icono privado">

    <section class="quienSoy__section">
      <h3 class="quienSoy__section-h3">mi misión</h3>
      <p class="quienSoy__section-p1">hacer que tu día sea inolvidable</p>
      <p class="quienSoy__section-p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
        accusamus aspernatur porro nobis neque! Magnam laboriosam, veniam illum corrupti in sint eaque,
        non, quia totam corporis quis libero dolore provident.</p>
    </section>
  </div>
  </div>

2
  • Gracias. ¿Aquí está bien no? Soy un poco novato jeje
    – Nacho
    Commented el 10 jun. 2020 a las 17:28
  • 1
    @Nacho ¿Esta respuesta solucionó tu problema? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – Marcos
    Commented el 10 jun. 2020 a las 17:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.