Posición de fondo-Background position CSS3


Por Tutoriales En Linea - En Diseño Web , CSS3 , html5 , WebSite , Noticias , Tutorial
En este Tutoriales En Linea les traemos este truco de efecto que permite varias posicion de fondo Background position en CSS3...
<style>
  main{
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  div{
    width: 229px; height: 139px;
    margin: auto;
    color: #f4f0ea;
    padding: 16px 29px 28px 20px;
    background: #b4a078 url('https://tutorialesenlinea.es/uploads/logo.svg') no-repeat bottom right / 78px 21px;
  }
  div:nth-of-type(1){
    background-position: right 29px bottom 28px;
  }
  div:nth-of-type(2){
    background-origin: content-box;
    margin: 29px 0; /* Alineación vertical para el móvil. */
  }
  div:nth-of-type(3){
    background-position: calc(100% - 29px) calc(100% - 28px);
  }
</style>

<main>
    <div class="block1">background-position scheme</div>
    <div class="block2">background-origin scheme</div>
    <div class="block3">calc scheme</div>
</main>
Ver resultado
Compartir
Tutoriales En Linea

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas...

Posts Relacionados