Maison >Java >javaDidacticiel >Comment écrire la couleur du dégradé d'arrière-plan jsp
Comment écrire la couleur du dégradé d'arrière-plan jsp
- (*-*)浩original
- 2019-05-29 13:28:324525parcourir
Pour que la couleur d'arrière-plan d'un div apparaisse en dégradé, certaines personnes utilisent des artistes pour découper différentes barres de couleurs, puis utilisent l'image d'arrière-plan pour remplir répéter-x. Ici, CSS est utilisé pour contrôler le dégradé de couleurs, mais s'il vous plaît. remarque : Ceci est obligatoire Résoudre les problèmes de compatibilité de navigation
Arrière-plan dégradé sous le navigateur IE
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
Instructions associées :
Le code de filtre ci-dessus a principalement trois paramètres, dans l'ordre : startcolorstr, endcolorstr et gradientType. Parmi eux, gradientType=1 représente un dégradé horizontal et gradientType=0 représente un dégradé vertical. startcolorstr="color" représente la couleur de départ du dégradé, endcolorstr="color" représente la couleur à la fin du dégradé.
Le code ci-dessus implémente un dégradé du rouge au bleu, mais n'inclut pas les modifications de transparence. En effet, IE ne prend actuellement pas en charge l'attribut d'opacité et la couleur RGBA. Pour obtenir des modifications de transparence sous IE, vous devez toujours le faire. utilisez les filtres IE. Mirror, la fonction de filtre de transparence d'IE est relativement puissante. Cette puissance est similaire à l'utilisation du dégradé d'arrière-plan CSS dans les navigateurs Firefox ou Safari.
Fond dégradé sous le navigateur Firefox
Pour la mise en place du fond dégradé sous le navigateur Firefox (Firefox 3.6+), vous devez utiliser l'attribut dégradé CSS3, Attribut -moz -linear-gradient, l'implémentation de l'effet peut être vue dans le code suivant :
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
Implémentation de l'arrière-plan dégradé sous le navigateur Chrome
Pour les navigateurs principaux du webkit Par exemple, l'implémentation de l'arrière-plan dégradé dans le navigateur Chrome/Safari utilise également la méthode de dégradé CSS3, css-gradient, en particulier -webkit-gradient. Il existe quelques différences dans l'utilisation du navigateur Firefox.
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!