用背景渐变的透明度设置不同颜色的背景渐变_html/css_WEB-ITnose
项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料,现在也有js支持根据你输入的网页内容自动填充渐变色,但是对于我这种js不是很好的人来说,还是想从css3上找点方法出来。
我发现css3的背景渐变中的透明度可以解决这个问题(前提是背景渐变的颜色是相近的)。
我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
其中各个浏览器渲染不同,又分为:
Webkit:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
下面的写法是用于safari旧版本的
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
Mozilla:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
Firefox渲染渐变的写法和Safari大致相同,不同的是需要将渐变属性改为-moz-linear-gradient
Opera:
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
按照上面的写法,让Opera浏览器渲染直接将属性改为-o-linear-gradient,是不是很简单?
IE:
IE比较顽固,不支持渐变,但是提供了渐变滤镜
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');
说了这么多,大家对例子里rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇?没错,解决这个头疼问题的关键就是它 - 渐变透明度。设置渐变透明度(值从0.1-0.9)可以使渐变颜色处在不同值的透明度下,也就是说通过透明度,背景可以呈现不同透明度下的背景颜色。
下面图片是用上面代码生成的背景渐变:
是不是看不出渐变透明(感觉灰灰的)?没错,因为颜色取值是从白到黑,那中间的过渡色自然就是灰色的了。但是如果你在加上一个背景颜色的话,那效果就出来了。
比如我们加个background-color: #92D050:
你只需要配置background-color, 就可以让背景呈现不同的渐变色。
完整的代码:
1 background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);2 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));3 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);4 background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);5 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');6 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);7 background-color: #669900;
其中rgba()中的颜色(rgb)一般取白色(255,255,255)或者黑色(0,0,0), 而透明度的设置就看你自己想要什么样的渐变效果了。
下面是几个不同渐变色的例子:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%);
所以如果能很好的运用背景渐变的透明度,可以在很大程度上定义统一的背景渐变色,而用户只需要输入一个颜色域,就可以把主题配置成想要的渐变效果。不过遗憾的是,这种方法就现在而言,只能适用于背景渐变颜色相近的主题。多余一种颜色的背景渐变还是得用这种写法
background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'utilisation de balises est la méthode la plus simple et recommandée. La syntaxe convient aux navigateurs modernes pour intégrer directement le PDF; 2. L'utilisation de balises peut fournir une meilleure prise en charge du contenu de contrôle et de sauvegarde, la syntaxe est, et fournit des liens de téléchargement dans les balises sous forme de solutions de sauvegarde lorsqu'elles ne sont pas prises en charge; 3. Il peut être intégré via Google Docsviewer, mais il n'est pas recommandé d'utiliser largement en raison de problèmes de confidentialité et de performances; 4. Afin d'améliorer l'expérience utilisateur, les hauteurs appropriées doivent être définies, des tailles réactives (telles que la hauteur: 80VH) et les liens de téléchargement PDF doivent être fournis afin que les utilisateurs puissent les télécharger et les visualiser eux-mêmes.

Pour ajouter une icône à la barre de titre du site Web, vous devez lier un fichier Favicon dans une partie du HTML. Les étapes spécifiques sont les suivantes: 1. Préparez un fichier d'icône 16x16 ou 32x32 pixels. Il est recommandé d'utiliser Favicon.ico pour le nommer et le placer dans le répertoire racine du site Web, ou utiliser des formats modernes tels que PNG et SVG; 2. Ajouter des balises de liaison à HTML, telles que les formats PNG ou SVG, ajustez l'attribut de type en conséquence; 3. Ajouter éventuellement des icônes haute résolution pour les appareils mobiles, tels que AppletouCon, et spécifiez différentes tailles via l'attribut de tailles; 4. Suivez les meilleures pratiques, placez l'icône dans le répertoire racine pour assurer la détection automatique, effacer le cache du navigateur après la mise à jour et vérifier l'exactitude du chemin du fichier.

Le choix du bon type HTMLinput peut améliorer la précision des données, améliorer l'expérience utilisateur et améliorer la convivialité. 1. Sélectionnez les types d'entrée correspondants en fonction du type de données, tels que le texte, le courrier électronique, le tel, le numéro et la date, qui peuvent vérifier automatiquement la somme de la somme et l'adaptation au clavier; 2. Utilisez HTML5 pour ajouter de nouveaux types tels que l'URL, la couleur, la plage et la recherche, qui peuvent fournir une méthode d'interaction plus intuitive; 3. Utilisez l'espace réservé et les attributs requis pour améliorer l'efficacité et la précision du remplissage des formulaires, mais il convient de noter que l'espace réservé ne peut pas remplacer l'étiquette.

UsetheelementwithinatagtocreatEasanticsearchField.2. y comprisaForAccesssibility, settheform'sactionandMethod = "get" attributestosenddatatoesearchndpointwithAsharableArl.3.Addname = "Q" todefinetheQueryParameter, usePlaceHolderToguiseUd

Tout d'abord, vérifiez si le chemin d'attribut SRC est correct et assurez-vous que le chemin relatif ou absolu correspond à l'emplacement du fichier HTML; 2. Vérifiez si le nom de fichier et l'extension sont correctement orthographiés et sensibles à la casse; 3. Confirmez que le fichier image existe réellement dans le répertoire spécifié; 4. Utilisez les attributs ALT appropriés et assurez-vous que le format d'image est .jpg, .png, .gif ou .webp largement pris en charge par le navigateur; 5. Dépannage des problèmes de cache du navigateur, essayez de forcer la rafraîchissement ou d'accès directement à l'URL de l'image; 6. Vérifiez les paramètres d'autorisation du serveur pour vous assurer que le fichier peut être lu et non bloqué; 7. Vérifiez que la syntaxe de balise IMG est correcte, y compris les devis et les bons d'attribut corrects, et enfin dépanner les erreurs 404 ou les problèmes de syntaxe via l'outil de développeur du navigateur pour s'assurer que l'image est affichée normalement.

L'utilisation de balises HTML peut améliorer l'accessibilité et la clarté du contenu; 1. Mark Abréviations ou acronymes avec abréviations; 2. Ajouter des attributs de titre à des abréviations inhabituelles pour fournir une explication complète; 3. Utiliser lorsque le document apparaît pour la première fois, en évitant les annotations en double; 4. Vous pouvez personnaliser le style via CSS, et le navigateur par défaut affiche généralement des soulignements pointillés; 5. Il aide à dépister les utilisateurs du lecteur à comprendre les termes et à améliorer l'expérience utilisateur.

L'utilisation de Fontawesome peut rapidement ajouter des icônes en introduisant CDN et en ajoutant des classes d'icônes à des boutons, tels que comme; 2. À l'aide d'étiquettes pour intégrer des icônes personnalisées dans les boutons, le chemin et la taille corrects doivent être spécifiés; 3. ENCHETER CODE SVG directement pour obtenir des icônes haute résolution et les garder cohérents avec la couleur du texte; 4. L'espacement doit être ajouté via CSS et ARIA-LABEL doit être ajouté aux boutons de l'icône pour améliorer l'accessibilité; En résumé, Fontawesome convient le plus aux icônes standard, les images conviennent aux conceptions personnalisées, tandis que SVG offre la meilleure mise à l'échelle et le meilleur contrôle, et les méthodes doivent être sélectionnées en fonction des besoins du projet. Fontawesome est généralement recommandé.

Utilisez des éléments et définissez les attributs d'action et de méthode pour spécifier l'adresse et la méthode de soumission des données; 2. Ajouter des champs d'entrée avec l'attribut de nom pour vous assurer que les données peuvent être reconnues par le serveur; 3. Utiliser ou créer un bouton de soumission, et après avoir cliqué, le navigateur enverra les données de formulaire à l'URL spécifiée, qui sera traitée par le backend pour terminer la soumission des données.
