Skip to main content
adicionei mais informações
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Usar dois .png ao mesmo tempo da forma que vc quer fica complicado, pq se eles tiverem o mesmo media="(min-width: ;)" um vai sobrescrever o outro, e com valores diferentes eles nunca vão aparecer ao mesmo tempo entende.

Outro exemplo, agora com Duas imagens. Só que são usei duas tags <img> com o srcset e sizes dentro dela. O background-image está na tag <figure>

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.item {
    background: url(http://placecage.com/600/400) no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60%;
}
img {
    margin: auto;
}
<figure class="item">
    <picture>
        <!-- <source srcset="no.png" 
        media="(min-width:400px)" 
        /> -->
        <!-- <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />     -->

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png"
            srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-512.png 800w,
            https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png"
            srcset="https://cdn4.iconfinder.      com/data/icons/icocentre-free-icons/137/f-check_256-512.png 800w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

    </picture>
</figure>

Sugiro também a leitura desses dois artigos para entender melhor o srcset e sizes

https://ericportis.com/posts/2014/srcset-sizes/

https://bitsofco.de/the-srcset-and-sizes-attributes/

Usar dois .png ao mesmo tempo da forma que vc quer fica complicado, pq se eles tiverem o mesmo media="(min-width: ;)" um vai sobrescrever o outro, e com valores diferentes eles nunca vão aparecer ao mesmo tempo entende.

Outro exemplo, agora com Duas imagens. Só que são usei duas tags <img> com o srcset e sizes dentro dela. O background-image está na tag <figure>

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.item {
    background: url(http://placecage.com/600/400) no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60%;
}
img {
    margin: auto;
}
<figure class="item">
    <picture>
        <!-- <source srcset="no.png" 
        media="(min-width:400px)" 
        /> -->
        <!-- <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />     -->

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png"
            srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-512.png 800w,
            https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png"
            srcset="https://cdn4.iconfinder.      com/data/icons/icocentre-free-icons/137/f-check_256-512.png 800w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

    </picture>
</figure>

Sugiro também a leitura desses dois artigos para entender melhor o srcset e sizes

https://ericportis.com/posts/2014/srcset-sizes/

https://bitsofco.de/the-srcset-and-sizes-attributes/

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Não sei se te atende, mas vc pode usar um Background imagem na tag Figure, e os PNGs por cima.

Fiz abaixo um modelo bem simples do que estou falando. (Exiba também "Página Toda" para ver mudando as imagens.)

.item {
    background: url(http://placecage.com/600/200) no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    display: flex;
}
picture {
    margin: auto
}
<figure class="item">
  <picture>
     <source srcset="https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79" media="(min-width:768px)" />
     <source srcset="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w170" media="(min-width:450px)" />
     <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />    
  </picture>
</figure>