• \"CSS3實戰(zhàn)開發(fā):使用CSS3實現(xiàn)photoshop的過濾效果_html\/css_WEB-ITnose\"<\/body><\/html><\/pre> <\/p>

     <\/p>

    此時運行效果圖如下:<\/p>

    <\/p>

    下面我給大家介紹相應特性,同時給各位演示應用圖片過濾樣式之后的效果圖。<\/p>

    一、調整圖像灰階度:grayscale,范圍為0%-100%。應用樣式代碼如下:<\/p>

    img {       -webkit-filter: grayscale(100%);  } <\/pre>  <\/p>  

     <\/p>

    此時頁面效果為:<\/p>

    <\/p>

    二、給圖片應用深褐色效果:sepia,范圍0-100%語法代碼如下:<\/p>

    img {       -webkit-filter: sepia(100%);  }  <\/pre>  <\/p>  

     <\/p>

    此時運行頁面效果:<\/p>

    <\/p>

    三、調整圖片曝光度:brightness,范圍0%-100%,語法代碼如下:<\/p>

    img {      -webkit-filter: brightness(40%);   }  <\/pre>  <\/p>  

     <\/p>

    運行頁面,效果如下:<\/p>

    <\/p>

    四、調整圖像對比度:contrast,語法代碼如下:<\/p>

    img {      -webkit-filter: contrast(500%);   }  <\/pre>  <\/p>  

     <\/p>

    頁面效果如下:<\/p>

    <\/p>

    最后給大家介紹一個模糊特效:blur,語法代碼如下:<\/p>

    img {      -webkit-filter: blur(2px);   } <\/pre>  <\/p>  

     <\/p>

    此時頁面效果如下:<\/p>

    <\/p>

    當然,上面的這些特性是可以同時使用的,比如,當鼠標劃過圖片時,將圖片變成灰色的,且模糊圖片,則代碼如下:<\/p>

    img:hover {      -webkit-filter:grayscale(100%) blur(2px);   }  <\/pre>  <\/p>  

    ?<\/p>

    此時頁面效果為:<\/p>

    <\/p>

    ?<\/p>

    原來用CSS特性完成Photoshop的過濾功能是如此簡單。<\/p>

    ?<\/p> "}

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    Rumah hujung hadapan web html tutorial CSS3實戰(zhàn)開發(fā):使用CSS3實現(xiàn)photoshop的過濾效果_html/css_WEB-ITnose

    CSS3實戰(zhàn)開發(fā):使用CSS3實現(xiàn)photoshop的過濾效果_html/css_WEB-ITnose

    Jun 24, 2016 am 11:59 AM
    css3 Pertempuran sebenar membangun Kesan penapis

    我們知道,使用Photoshop來調整圖像的亮度和對比度,或者將圖片轉化為灰度等等是很常見的功能。今天我將給大家介紹幾個新特性,我們使用CSS來給web圖像添加相同的效果。

    首先我們先在網頁中顯示一張圖片,html代碼如下:

    <!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css" media="screen"><title>CSS3實戰(zhàn)開發(fā):使用CSS3實現(xiàn)photoshop的過濾效果</title></head><body><img  src="/static/imghw/default1.png"  data-src="20140821.jpg"  class="lazy"     style="max-width:90%" / alt="CSS3實戰(zhàn)開發(fā):使用CSS3實現(xiàn)photoshop的過濾效果_html/css_WEB-ITnose" ></body></html>

    此時運行效果圖如下:

    下面我給大家介紹相應特性,同時給各位演示應用圖片過濾樣式之后的效果圖。

    一、調整圖像灰階度:grayscale,范圍為0%-100%。應用樣式代碼如下:

    img {       -webkit-filter: grayscale(100%);  } 

    此時頁面效果為:

    二、給圖片應用深褐色效果:sepia,范圍0-100%語法代碼如下:

    img {       -webkit-filter: sepia(100%);  }  

    此時運行頁面效果:

    三、調整圖片曝光度:brightness,范圍0%-100%,語法代碼如下:

    img {      -webkit-filter: brightness(40%);   }  

    運行頁面,效果如下:

    四、調整圖像對比度:contrast,語法代碼如下:

    img {      -webkit-filter: contrast(500%);   }  

    頁面效果如下:

    最后給大家介紹一個模糊特效:blur,語法代碼如下:

    img {      -webkit-filter: blur(2px);   } 

    此時頁面效果如下:

    當然,上面的這些特性是可以同時使用的,比如,當鼠標劃過圖片時,將圖片變成灰色的,且模糊圖片,則代碼如下:

    img:hover {      -webkit-filter:grayscale(100%) blur(2px);   }  

    ?

    此時頁面效果為:

    ?

    原來用CSS特性完成Photoshop的過濾功能是如此簡單。

    ?

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    Video Face Swap

    Video Face Swap

    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Topik panas

    Tutorial PHP
    1502
    276
    Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Apr 03, 2024 am 08:13 AM

    Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan

    Empat alat pengaturcaraan berbantukan AI yang disyorkan Empat alat pengaturcaraan berbantukan AI yang disyorkan Apr 22, 2024 pm 05:34 PM

    Alat pengaturcaraan berbantukan AI ini telah menemui sejumlah besar alat pengaturcaraan berbantukan AI yang berguna dalam peringkat pembangunan AI yang pesat ini. Alat pengaturcaraan berbantukan AI boleh meningkatkan kecekapan pembangunan, meningkatkan kualiti kod dan mengurangkan kadar pepijat Ia adalah pembantu penting dalam proses pembangunan perisian moden. Hari ini Dayao akan berkongsi dengan anda 4 alat pengaturcaraan berbantukan AI (dan semua menyokong bahasa C# saya harap ia akan membantu semua orang). https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot ialah pembantu pengekodan AI yang membantu anda menulis kod dengan lebih pantas dan dengan sedikit usaha, supaya anda boleh lebih memfokuskan pada penyelesaian masalah dan kerjasama. Git

    Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Mar 28, 2024 am 11:11 AM

    Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza

    Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Mar 28, 2024 pm 03:20 PM

    Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.

    Pengaturcara AI manakah yang terbaik? Terokai potensi Devin, Tongyi Lingma dan ejen SWE Pengaturcara AI manakah yang terbaik? Terokai potensi Devin, Tongyi Lingma dan ejen SWE Apr 07, 2024 am 09:10 AM

    Pada 3 Mac 2022, kurang daripada sebulan selepas kelahiran pengaturcara AI pertama di dunia, Devin, pasukan NLP Universiti Princeton membangunkan pengaturcara AI sumber terbuka ejen SWE. Ia memanfaatkan model GPT-4 untuk menyelesaikan isu secara automatik dalam repositori GitHub. Prestasi ejen SWE pada set ujian bangku SWE adalah serupa dengan Devin, mengambil purata 93 saat dan menyelesaikan 12.29% masalah. Dengan berinteraksi dengan terminal khusus, ejen SWE boleh membuka dan mencari kandungan fail, menggunakan semakan sintaks automatik, mengedit baris tertentu dan menulis serta melaksanakan ujian. (Nota: Kandungan di atas adalah sedikit pelarasan bagi kandungan asal, tetapi maklumat utama dalam teks asal dikekalkan dan tidak melebihi had perkataan yang ditentukan.) SWE-A

    Ketahui cara membangunkan aplikasi mudah alih menggunakan bahasa Go Ketahui cara membangunkan aplikasi mudah alih menggunakan bahasa Go Mar 28, 2024 pm 10:00 PM

    Tutorial aplikasi mudah alih pembangunan bahasa Go Memandangkan pasaran aplikasi mudah alih terus berkembang pesat, semakin ramai pembangun mula meneroka cara menggunakan bahasa Go untuk membangunkan aplikasi mudah alih. Sebagai bahasa pengaturcaraan yang mudah dan cekap, bahasa Go juga telah menunjukkan potensi yang kukuh dalam pembangunan aplikasi mudah alih. Artikel ini akan memperkenalkan secara terperinci cara menggunakan bahasa Go untuk membangunkan aplikasi mudah alih dan melampirkan contoh kod khusus untuk membantu pembaca bermula dengan cepat dan mula membangunkan aplikasi mudah alih mereka sendiri. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran dan alatan pembangunan. kepala

    Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja. Apr 23, 2024 am 08:04 AM

    Model besar yang boleh menganalisis kandungan PDF, halaman web, poster dan carta Excel secara automatik tidak terlalu mudah untuk pekerja. Model InternLM-XComposer2-4KHD (disingkat IXC2-4KHD) yang dicadangkan oleh Shanghai AILab, Universiti China Hong Kong dan institusi penyelidikan lain menjadikan perkara ini menjadi kenyataan. Berbanding dengan model besar berbilang modal lain yang mempunyai had resolusi tidak lebih daripada 1500x1500, kerja ini meningkatkan imej input maksimum model besar berbilang mod kepada lebih resolusi 4K (3840x1600) dan menyokong sebarang nisbah aspek dan 336 piksel kepada 4K Perubahan resolusi dinamik. Tiga hari selepas dikeluarkan, model itu mengungguli senarai populariti model menjawab soalan visual HuggingFace. Mudah dikendalikan

    Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Apr 17, 2024 pm 05:07 PM

    Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam

    See all articles