Executeu la tècnica amb CSS
Si esteu dissenyant un lloc web, us pot interessar aprendre a crear una imatge de fons fix o marca d'aigua en una pàgina web. Aquest és un tractament de disseny comú que ha estat popular en línia durant força temps. És un efecte pràctic tenir en la seva bossa de disseny web de trucs.
Si no ho heu fet abans o ho heu provat prèviament sense sort, el procés pot semblar intimidatori, però en realitat no és gaire difícil. Amb aquest breu tutorial, obtindreu la informació que necessiteu per dominar la tècnica en qüestió de minuts utilitzant CSS.
Començant
Les imatges de fons o les filigranes (que són realment imatges de fons molt lleugeres) tenen un historial en disseny imprès. Els documents han inclòs sempre filigranes per evitar que es copien. A més, molts volants i fullets usen imatges de fons grans com a part del disseny de la peça impresa. El disseny web ha fet llargs estils presos des de les imatges d'impressió i de fons, un d'aquests estils presos.
Aquestes grans imatges de fons són fàcils de crear utilitzant les següents tres propietats d'estil CSS :
- imatge de fons
- repetició de fons
- adjunció de fons
- mida del fons
Imatge de fons
Utilitzarà la imatge de fons per definir la imatge que s'utilitzarà com a filigrana. Aquest estil simplement utilitza una ruta de fitxer per carregar una imatge que teniu al vostre lloc, probablement en un directori anomenat "imatges".
background-image: url (/images/page-background.jpg);
És important que la imatge sigui més lleugera o més transparent que una imatge normal. Això crearà una imatge de "filigrana" en què es trobi una imatge semitransparent darrere del text, gràfics i altres elements principals de la pàgina web. Sense aquest pas, la imatge de fons competeix amb la informació de la vostra pàgina i dificulta la lectura.
Podeu ajustar la imatge de fons en qualsevol programa d'edició com Adobe Photoshop.
Repetició de fons:
La propietat de repetició de fons ve després. Si voleu que la vostra imatge sigui un gran gràfic d'estil de marca d'aigua, usareu aquesta propietat perquè la imatge només aparegui una sola vegada.
background-repeat: no-repeat;
Sense la propietat "no repetir", el valor predeterminat és que la imatge es repetirà una i altra vegada a la pàgina. Això no és desitjable en la majoria de dissenys de pàgines web modernes, de manera que aquest estil es consideri essencial en el vostre CSS.
Fons adjunt
El fitxer adjunt és una propietat que molts dissenyadors web us obliden. Usant-lo, manté la imatge de fons fixada al lloc quan feu servir la propietat "fixada". És el que converteix aquesta imatge en una filigrana que es resol a la pàgina.
El valor predeterminat d'aquesta propietat és "desplaçar-se". Si no especifiqueu un valor de fixació de fons, el fons es desplaçarà amb la resta de la pàgina.
adjunció de fons: arreglat;
Mida del fons
La mida del fons és una propietat CSS nova. Permet definir la mida d'un fons segons la vista que es visualitzi. Això és molt útil per als llocs web responsables que es mostraran en diferents mides en diferents dispositius .
fons: tapa;
Dos valors útils que podeu utilitzar per a aquesta propietat inclouen:
- Coberta : escalfa el fons perquè es mostri l'amplada completa o l'alçada completa. Això vol dir que algunes parts de la imatge poden no aparèixer a la pantalla, però que es cobrirà tota l'àrea.
- Conté : escalfa la imatge perquè l'ample i l'alçada sencera es mostrin a l'àrea que estigui estilitzada. La imatge no està tallada, però la part negativa és que les parts de la zona poden no estar cobertes per la imatge.
Afegint el CSS a la vostra pàgina
Després d'entendre les propietats anteriors i els seus valors, podeu afegir aquests estils al vostre lloc web.
Afegiu el següent al HEAD de la vostra pàgina web si feu un lloc d'una sola pàgina. Afegiu-lo als estils CSS d'un full d'estils externs si esteu construint un lloc de diverses pàgines i voleu aprofitar la potència d'un full extern.