Maison  >  Article  >  interface Web  >  Comment utiliser CSS pour rendre les images translucides

Comment utiliser CSS pour rendre les images translucides

php中世界最好的语言
php中世界最好的语言original
2017-12-16 11:09:522981parcourir

Le code que je vous ai apporté aujourd'hui explique comment utiliser CSS pour que l' image obtienne un effet translucide.

 <style type="text/css">
<!--
.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}
-->
</style>

Code html complet :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片半透明效果</title>
<style type="text/css">
</style>
</head>
<body>
<div class="alpha"><img src="http://www.php.cn/img/1.gif" width="180" /><br />
以上是CSS处理后效果<br />
<br />
</div>
<div><img src="http://www.www.php.cn/img/1.gif" width="180" /><br />
以上是处理前效果</div>
</body>
</html>

Le code de l'effet de filtre CSS utilisé : filter: Alpha(Opacity=30, FinishOpacity=0, Style= 1, StartX= 0, StartY=0, FinishX=100, FinishY=100) Modifiez les chiffres à l'intérieur pour ajuster la transparence et l'effet

Veuillez noter que cet effet de filtre CSS ne peut pas être implémenté dans Firefox ou Google Chrome ou ce n'est pas le cas. fonctionnent, nous recommandons donc généralement de ne pas utiliser de filtres CSS. Les filtres CSS occuperont trop de mémoire informatique et rendront la navigation sur le Web difficile, vous pouvez donc les utiliser de manière appropriée.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Réponses aux questions sur la dénomination des cas de chameaux et JS

Valeurs booléennes, opérateurs relationnels en JS, Explication détaillée et exemples d'opérateurs logiques

Résumé du framework front-end js et explication de ses utilisations

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn