以下のエディターは、CSS3 フィルター効果の簡単な例を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして、一緒に見てみましょう
上の写真はCSS3の新機能のフィルター効果です。これらを学んだ後、美しさとハンサムを愛する大手ウェブ人は完璧に使用できるでしょうか。写真を美しくするためのコードはありますか? わかりました~~
それでは、まず写真の後ろにある白いフレームに注目してみましょう
<style>
#p1{
/*给p定义宽高和颜色*/
width: 200px;
height: 250px;
background: white;
/* 内填充距离照片为15px ，文字居中*/
padding: 15px;
text-align: center;
/* 把白色背景旋转-10deg */
-webkit-transform: rotate(-10deg);
/*给背景一个阴影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
<BR>
<body><BR>
<p id="p1">
<img src="/static/imghwm/default1.png" data-src="img/001V28Mwty6Fww02IiNad&690.jpg" class="lazy" alt="CSS3 フィルタリング効果の簡単な例" >
<p>灰色滤镜</p>
</p>
<BR>
</body>
白い背景のフレームを書いたら、フィルターに行きましょう
まず、 1枚目、アーティスティックな写真です 白黒
#p1 img{
/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/
width: 100%;
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/
-webkit-filter: grayscale(1); }
2枚目の写真、えーっと...古い写真です
#p1 img{
width: 100%;
-webkit-filter: sepia(1);
}
3枚目の写真、反転カラー？何色なのかも分かりません
#p1 img{
width: 100%;
-webkit-filter: hue-rotate(200deg);
}
4枚目の写真は白い霧の層で覆われているように見えます
#p1 img{
width: 100%;
-webkit-filter: opacity(0.5);
}
レンダリングにない写真もあります、それはぼかし効果ですコードは次のとおりです
#p4 img{
width: 100%;
-webkit-filter: opacity(0.5);
}
わかりました、フィルターの共有が完了しました。次は美しい写真に進みます
上記の css3 のフィルター効果の簡単な例は、css3 によって共有されるすべてのコンテンツです。エディターの参考になれば幸いです。また、中国語の Web サイトをさらにサポートしていただければ幸いです。
css3 フィルタリング効果のより簡単な例と関連記事については、PHP 中国語 Web サイトに注目してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
WebStorm Mac版
便利なJavaScript開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
メモ帳++7.3.1
使いやすく無料のコードエディター
