Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo cambiar el tamaño del fondo usando el kit de herramientas Tachyons.
Tachyons Theming Background Size se utiliza para rellenar los elementos que contienen con la imagen de fondo. Podemos usar clases de contenido y cobertura para llenar la imagen de fondo.
Taquiones Tematización Clases de tamaño de fondo:
- contener: se utiliza para mostrar una imagen completa dentro del elemento, independientemente de las dimensiones del elemento.
- cover: se utiliza para mostrar el elemento completo, pero no garantiza que se muestre la imagen completa.
Sintaxis:
<element-name class="classs-name">
...
</element-name>
Ejemplo 1: este ejemplo demuestra el tamaño de fondo de la tematización de taquiones utilizando la clase de contención .
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png');
background-repeat: no-repeat;
}
</style>
</head>
<body class="contain">
<h1 class="green">GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo demuestra el tamaño de fondo de la tematización de taquiones utilizando la clase de cobertura .
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png');
background-repeat: no-repeat;
}
</style>
</head>
<body class="cover">
<h1 class="green">GeeksforGeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/background-size/
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA