css3的过滤效果的简单示例
下面小编就为大家带来一篇css3的过滤效果简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~
好，咱们先把照片后面的白框实现，
<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="img/001V28Mwty6Fww02IiNad&690.jpg">
<p>灰色滤镜</p>
</p>
<BR>
</body>把白色的背景框写好之后，接下来就该到滤镜了
首先来第一张，艺术的黑白色
#p1 img{
/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/
width: 100%;
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/
-webkit-filter: grayscale(1); }第二张照片，额...老照片.
#p1 img{
width: 100%;
-webkit-filter: sepia(1);
}第三张照片，反色？我也不太清楚啥颜色
#p1 img{
width: 100%;
-webkit-filter: hue-rotate(200deg);
}第四张照片，仿佛罩了一层白雾
#p1 img{
width: 100%;
-webkit-filter: opacity(0.5);
}还有一张照片的效果图上没有，是模糊效果代码如下
#p4 img{
width: 100%;
-webkit-filter: opacity(0.5);
}好了，我的滤镜分享完毕，接下来美图去了
以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多css3的过滤效果的简单示例相关文章请关注PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Python melaksanakan penapisan dan penapisan data XML
Aug 09, 2023 am 10:13 AM
Python melaksanakan penapisan dan penapisan data XML (eXtensibleMarkupLanguage) ialah bahasa penanda yang digunakan untuk menyimpan dan menghantar data Ia fleksibel dan berskala dan sering digunakan untuk pertukaran data antara sistem yang berbeza. Apabila memproses data XML, kami selalunya perlu menapis dan menapisnya untuk mengekstrak maklumat yang kami perlukan. Artikel ini akan memperkenalkan cara menggunakan Python untuk menapis dan menapis data XML. Import modul yang diperlukan Sebelum memulakan, kami
Bagaimana untuk membuka fail pendua yang ditapis dalam Quark
Mar 01, 2024 am 11:25 AM
Apabila menggunakan Quark Browser, terdapat fungsi untuk menapis fail pendua Beberapa rakan tidak begitu biasa dengan ini. 1. Mula-mula, klik "Pelayar Quark" pada telefon bimbit anda untuk memasuki antara muka, kemudian klik dan pilih "Cakera Rangkaian Quark" dalam pilihan di tengah halaman untuk dibuka dan masuk. 2. Cari "Tetapan Sandaran" di bahagian bawah antara muka cakera rangkaian Quark, dan klik untuk membukanya, seperti yang ditunjukkan dalam rajah di bawah: 3. Seterusnya, pada halaman yang anda masukkan, terdapat "Filter Duplicate Files", yang dipaparkan di belakangnya Terdapat butang suis Klik gelangsar bulat padanya dan tetapkannya kepada warna untuk menghidupkan fungsi ini Apabila anda terus membuat sandaran fail, fail pendua akan dilangkau untuk menjimatkan kapasiti cakera rangkaian.
Bagaimana untuk menggunakan fungsi PHP untuk mencari dan menapis data?
Jul 24, 2023 am 08:01 AM
Bagaimana untuk menggunakan fungsi PHP untuk mencari dan menapis data? Dalam proses pembangunan menggunakan PHP, selalunya perlu untuk mencari dan menapis data. PHP menyediakan pelbagai fungsi dan kaedah untuk membantu kami mencapai operasi ini. Artikel ini akan memperkenalkan beberapa fungsi dan teknik PHP yang biasa digunakan untuk membantu anda mencari dan menapis data dengan cekap. Carian rentetan Fungsi carian rentetan yang biasa digunakan dalam PHP ialah strpos() dan strstr(). strpos() digunakan untuk mencari kedudukan subrentetan tertentu dalam rentetan Jika wujud, ia akan kembali
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
