Inicia sesión




Posición de fondo-Background position CSS3

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

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-08
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial

Posición de fondo-Background position CSS3
Posición de fondo-Background position CSS3 Posición de fondo-Background position CSS3...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Como Saber Si Mi Equipo Está Infectado De Malware

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-11
  • Categorias: Software Ordenador Internet malware Noticias Tutorial

Qué Hacer Para Que Google Indexe Tu Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-11
  • Categorias: Google WebSite Indexar Noticias Tutorial

Cómo descargar y descubrir los mejores stickers en Facebook

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-11
  • Categorias: Redes Sociales Facebook Noticias Tutorial

Desarrollo De Software - Parte 1

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-11
  • Categorias: Lenguajes De Programacion Software Nuevas Tecnologias Cursos Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial