今日紹介するコードは、CSS を使用して 写真 に半透明効果を与える方法を見てみましょう。
<style type="text/css">
<!--
.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}
-->
</style>完全なHTMLコード:
<!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>
はCSSフィルター効果コードを使用します: filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100) 変更中の数字で透明度と効果を調整します
この CSS フィルター効果は Firefox や Google Chrome では実現できない、または機能しないことに注意してください。そのため、通常は CSS フィルターや CSS フィルターを使用しないことをお勧めします。ミラーリングはユーザーのコンピューターに影響を与える可能性があります。メモリが占有されすぎたり、Web ブラウジングが困難になったりするため、使用はほどほどにしてください。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
フロントエンド JS の概要フレームワークとその使用法の説明
以上がCSSを使って画像を半透明にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
