css怎么改变图片颜色
在css中，可以使用filter属性来改变图片颜色，例如：使用“filter:grayscale(%);”将图片设置为黑白、“filter: sepia(%);”将图片设置为棕褐色图像等。CSS的filter属性主要用于设置图像的视觉效果。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在CSS中可以使用filter属性，将类似Photoshop的滤镜效果应用于图片上，改变图片的颜色。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 300px;
}
.img1{
/*元素的灰度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img2{
/*将图像转换为棕褐色图像*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.img3{
/*色调旋转*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter:hue-rotate(55deg);
filter: hue-rotate(55deg);
}
.img4{
/*反转元素*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: invert(100%);
filter: invert(100%);
}
</style>
</head>
<body>
<div class="demo">
<img src="img/1.jpg" class="img1"/>
<img src="img/1.jpg" class="img2"/>
<img src="img/1.jpg" class="img3"/>
<img src="img/1.jpg" class="img4"/>
</div>
</body>
</html>原图：
使用filter属性改变颜色
CSS filter属性
CSS的filter属性主要用于设置图像的视觉效果。
语法：
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Filter 函数
注意： 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
none：这是默认值，不适用任何效果。
brightness()：设置元素的亮度。如果亮度为0％则为全黑，如果亮度为100％，则与原始亮度相同。大于100％结果的值是更明亮的元素。
grayscale()：设置元素的灰度，它将元素颜色转换为黑色和白色。灰度0％表示原始元素，100％表示完全灰度元素。
sepia()：它将图像转换为棕褐色图像，其中0％表示原始图像，100％表示完全棕褐色。
contrast()：用于调整元素的对比度。0％对比度表示完整的黑色元素，100％对比度表示原始元素。
saturate()：用于设置元素的饱和度。0％饱和度表示元素完全不饱和，100％饱和表示原始图像。大于100％结果的值是超饱和元素。
blur()：它将模糊效果应用于元素。如果未指定模糊值，则默认值为0。
opacity()：它设置图像的不透明度效果。0％不透明度表示元素完全透明，如果不透明度为100％，则表示原始图像。
hue-rotate()：它将色调旋转应用于图像。该值定义将调整图像样本的色环周围的度数。默认值为0deg，表示原始图像；该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert()：它反转元素。默认值为0％，表示原始图像。100％使图像完全反转。
drop-shadow()：它对元素应用阴影效果。它接受h-shadow，v-shadow，blur，spread和color作为值。
url()：接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci css怎么改变图片颜色. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China 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
1393
52
1207
24
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
