Les outils d’une stratégie de social selling | La dernière version de Gmail nourrie au machine learning | Comment sécuriser son stockage cloud | CleverPDF : une suite d’outils complète et gratuite pour convertir et modifier ses fichiers PDF | L’impact des réseaux sociaux en BtoB | Est-ce que la publicité imprimée est toujours pertinente pour votre entreprise | Google déclare la guerre aux SMS avec Chat | Monitorer vos sites : MainWp ou ManageWP | Yahoo vend son service de stockage photos Flickr à SmugMug | McDonald's UK basculerait d'Atos à Capgemini pour son support IT | 5 Compétences Dont Vous Avez Besoin Pour Mieux Écrire Votre Code | 5 obligations légales pour les sites internet en 2018 | Trelloist : un outil de gestion des tâches pour ceux qui aiment Trello et Todoist | Comment savoir si Facebook a partagé vos données personnelles avec Cambridge Analytica | Clouds low cost : lequel est le moins cher | Instagram Focus, pour flouter l’arrière-plan des photos automatiquement | Les 8 Tech Trends qui vont marquer l’année | Emailing : comment être conforme au RGPD | Text2MindMap, un outil gratuit pour faire une mindmap en ligne | Gmail : un nouveau design et de nouvelles fonctionnalités sur le web | WebAuthn, la norme Web qui va permettre de se connecter aux différents services sans mot de passe | Cisco ajoute des options de déploiement virtuel et cloud à son service Tetration | Mark Zuckerberg fait face au Sénat pour son grand oral | Community Management : Comment ne pas lasser ses followers | Linux 4.16 mieux armé contre Meltdown et Spectre | Stack Overflow dresse le bilan de l’employabilité des développeurs | Goo.gl, le raccourcisseur d’URL de Google, c’est terminé | Google News priorisera l’actualité des médias auxquels vous êtes abonné | 4 secrets d’experts pour booster votre référencement local en 2018 | Google déploie une batterie d'outils de sécurité cloud |

36 Visiteurs aujourd'hui

Abonnez-Vous

Ajouter un voile sur une image de fond en CSS

428 Vues 2018-06-14 backgrounds, CSS, linear-gradient Solutions techniques

Ajouter un voile sur une image de fond en CSS

Ajouter un voile sur une image c’est assez simple avec un logiciel de retouche. Mais si pour diverses raisons vous ne voulez pas retravailler votre image sous Photoshop ou Gimp pour l’assombrir, vous pouvez le faire directement en CSS. C’est aussi très simple finalement.

J’ai pu tester différentes techniques plus ou moins fiables dont une utilisant du Javascript qui consistait à créer un bloc absolute qui recouvrait l’ensemble de la page de son « voile ». Dans la mise en œuvre je trouvait ça assez peu élégant mais ça marchait pas mal dans la mesure ou on ajuster la taille dudit bloc lors du redimensionnement de la page.

Celle qui pour moi fonctionne le mieux utilise simplement les propriétés CSS sans aucun ajout de bloc HTML, le top quoi.

Pour notre exemple, on part donc d’un paysage enneigé pour avoir quelque chose qui ressemble ça :

Pour le moment le CSS de notre body ressemble donc à ça :



Multiple Backgrounds CSS

La technique utilisée est assez simple, il suffit simplement d’utiliser la possibilité d’appliquer plusieurs backgrounds (Fonds multiples) sur un élément HTML. Cette fonctionnalité est disponible depuis CSS3. Toutefois l’ajout d’un élément de background de type rgba n’est pas valide, il convient donc d’ajouter à la place un element de type linear-gradient utilisé à la base pour faire des dégradés.

Le CSS de notre body aura donc cette forme :






428 Vues 2018-06-14 backgrounds, CSS, linear-gradient Solutions techniques




Source


Articles Récentes




Aller à l'essentiel pour maitriser le Développement web

Cours de Développement Web en ligne par MEZGANI SAID

Actualités national et international

Trouve votre futur Métier

Trouve votre futur Métier

Articles Récentes