Executa a técnica con CSS
Se desexas un sitio web, podes estar interesado en aprender a crear unha imaxe de fondo fixa ou marca de auga nunha páxina web. Este é un tratamento de deseño común que foi popular en liña por bastante tempo. É un efecto práctico ter na súa bolsa de deseño web de trucos.
Se non o fixeches antes ou o probou previamente sen sorte, o proceso pode parecer intimidante, pero en realidade non é moi difícil. Con este breve tutorial, obterás a información que necesitas para dominar a técnica en cuestión de minutos usando CSS.
Comezando
As imaxes de fondo ou filigranas (que son imaxes de fondo moi claras) teñen un historial de deseño impreso. Os documentos inclúen longas marcas de auga para evitar que se copian. Ademais, moitos folletos e folletos usan grandes imaxes de fondo como parte do deseño da peza impresa. O deseño web ten longos estilos prestados de imaxes impresas e de fondo é un destes estilos prestados.
Estas grandes imaxes de fondo son fáciles de crear usando as seguintes tres propiedades de estilo CSS :
- imaxe de fondo
- repetición de fondo
- adxunto de fondo
- tamaño de fondo
Imaxe de fondo
Usará a imaxe de fondo para definir a imaxe que se usará como marca de auga. Este estilo simplemente usa unha ruta de ficheiro para cargar unha imaxe que ten no seu sitio, probablemente nun directorio chamado "imaxes".
background-image: url (/images/page-background.jpg);
É importante que a imaxe sexa máis lixeiro ou máis transparente que unha imaxe normal. Isto creará esa ollada de "marca de auga" na que unha imaxe semitransparente queda detrás do texto, gráficos e outros elementos principais da páxina web. Sen este paso, a imaxe de fondo competirá coa información da túa páxina e dificultará a lectura.
Pode axustar a imaxe de fondo en calquera programa de edición como Adobe Photoshop.
Repetición de fondo
A propiedade de repetición de fondo vénse a continuación. Se queres que a túa imaxe sexa un gran gráfico de marca de auga, usarías esta propiedade para que esta imaxe só apareza unha vez.
background-repeat: non-repetir;
Sen a propiedade "non repetir", o valor predeterminado é que a imaxe repetirá unha e outra vez na páxina. Non é desexable nos máis modernos deseños de páxinas web, polo que este estilo debería considerarse imprescindible no seu CSS.
Anexo de fondo
O anexo de fondo é unha propiedade que moitos deseñadores web esquecen. Usando mantén a súa imaxe de fondo fixada no lugar cando usa a propiedade "fixa". É o que converte esa imaxe nunha marca de auga que está fixada na páxina.
O valor predeterminado desta propiedade é "scroll". Se non especifica un valor de axuste de fondo, o fondo desprázase xunto co resto da páxina.
adxunto de fondo: fixo;
Tamaño do fondo
O tamaño do fondo é unha propiedade CSS máis recente. Permítelle definir o tamaño dun fondo segundo a vista que se está a ver. Isto é moi útil para sitios web sensibles que se mostrarán en diferentes tamaños en diferentes dispositivos .
tamaño de fondo: capa;
Dous valores útiles que pode usar para esta propiedade inclúen:
- Cubra : balance o fondo para que se amose o ancho total ou a altura completa. Isto significa que algunhas partes da imaxe poden non aparecer na pantalla pero que a área enteira estará cuberta.
- Contén : balance a imaxe para que se amose o ancho eo alto enteiro na área que estea a gusto. A imaxe non está cortada, pero a desvantaxe é que as partes da área poden non estar cubertas pola imaxe.
Engadir o CSS á túa páxina
Despois de comprender as propiedades anteriores e os seus valores, pode engadir estes estilos ao seu sitio web.
Engada o seguinte ao HEAD da súa páxina web se está facendo un sitio de páxina única. Engádeo aos estilos CSS dunha folla de estilo externa se está a construír un sitio de varias páxinas e quere aproveitar a potencia dunha folla externa.
corpo {
background-image: url (/images/page-background.jpg);
background-repeat: non-repetir;
adxunto de fondo: fixo;
tamaño de fondo: capa;
}
// ->
Cambia o URL da túa imaxe de fondo para que coincida co nome do ficheiro e a ruta do ficheiro específicos que sexan relevantes para o teu sitio. Fai que outras modificacións axeitadas axústanse tamén ao teu deseño e terás unha marca de auga.
Pode especificar posición, demasiado
Se queres colocar a filigrana nun lugar específico da túa páxina web, tamén podes facelo. Por exemplo, pode querer a marca de auga no medio da páxina ou quizais na esquina inferior, en oposición á esquina superior, que é o predeterminado.
Para facelo, engada a propiedade da posición de fondo para o seu estilo. Isto colocará a imaxe no lugar exacto que desexa que apareza. Podes usar valores de píxeles, porcentaxes ou aliñacións para lograr ese efecto de posicionamento.
posición de fondo: centro;