CSS3 フィルタリング効果の簡単な例
以下のエディターは、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/imghw/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 サイトに注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7480
15
1377
52
77
11
19
33
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
フィルタリングされた重複ファイルをQuarkで開く方法
Mar 01, 2024 am 11:25 AM
Quark Browserを使用していると、重複ファイルをフィルタリングする機能がありますが、これをよく知らない友人もいますので、この機能をオンにする方法を紹介しますので、興味のある方はぜひ一緒に見てください。 1. まず、携帯電話で「Quark Browser」をクリックしてインターフェースに入り、ページ中央のオプションで「Quark Network Disk」をクリックして選択し、開いて入ります。 2. 以下の図に示すように、Quark ネットワーク ディスク インターフェイスの下部で [バックアップ設定] を見つけ、クリックして開きます。 3. 次に、入力したページに [重複ファイルのフィルター] があります。スイッチボタンがあり、その上の円形スライダーをクリックして色に設定すると、機能がオンになります ファイルのバックアップを続行する場合、ネットワークディスク容量を節約するために重複したファイルがスキップされます。
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
Python は XML データのフィルタリングとフィルタリングを実装します。
Aug 09, 2023 am 10:13 AM
Python は XML データのフィルタリングとフィルタリングを実装します。XML (eXtensibleMarkupLanguage) はデータの保存と送信に使用されるマークアップ言語です。柔軟でスケーラブルであり、異なるシステム間のデータ交換によく使用されます。 XML データを処理する場合、多くの場合、必要な情報を抽出するためにデータをフィルター処理する必要があります。この記事ではPythonを使ってXMLデータをフィルタリングする方法を紹介します。必要なモジュールをインポートします。 開始する前に、
PHP 関数を使用してデータを検索およびフィルターするにはどうすればよいですか?
Jul 24, 2023 am 08:01 AM
PHP 関数を使用してデータを検索およびフィルターするにはどうすればよいですか? PHP を使用した開発プロセスでは、データの検索やフィルター処理が必要になることがよくあります。 PHP は、これらの操作の実現に役立つ関数とメソッドを豊富に提供します。この記事では、データを効率的に検索およびフィルタリングするために役立つ、一般的に使用される PHP 関数とテクニックをいくつか紹介します。文字列検索 PHP で一般的に使用される文字列検索関数は、strpos() と strstr() です。 strpos() は、文字列内の特定の部分文字列の位置を見つけるために使用されます。存在する場合は、それを返します。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
PHP と PHPMAILER: メール送信の自動フィルタリングを実装するにはどうすればよいですか?
Jul 21, 2023 am 09:25 AM
PHP と PHPMAILER: メール送信の自動フィルタリングを実装するにはどうすればよいですか?現代社会において、電子メールは人々がコミュニケーションを図るための重要な手段の 1 つとなっています。しかし、電子メールの普及と普及に伴い、スパムの量も爆発的な増加傾向を示しています。スパムメールはユーザーの時間とネットワーク リソースを浪費するだけでなく、ウイルスやフィッシング行為を引き起こす可能性があります。そのため、メール送信機能を開発する際には、迷惑メールを自動的にフィルタリングする機能を追加することが重要になります。この記事ではPHPとPHPMaiの使い方を紹介します。
