Web Front-endCSS TutorialHow to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)
How to achieve image filter effect in css3? In fact, it is very simple to use the css3 filter attribute to achieve several filter effects. This article will introduce to you what filter effects can be achieved by the css3 filter attribute, and how to implement these image filter effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First, we create a demo, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter滤镜</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/892/322/326/1539828284730270.jpg?x-oss-process=image/resize,p_40" class="lazy" / alt="How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)" >
</div>
</body>
</html>The effect is like this (without adding any filter effect):
Let’s take a look at the image filter effects that can be achieved by the css3 filter filter attribute:
1. The css3 image blur filter effect
only You need to add the following css code:
.demo img{
filter: blur(2px);/* 给图像设置高斯模糊，值越大越模糊 */
}Effect picture:
Considering the compatibility of the browser, we can add a statement:
.demo img{
-webkit-filter: blur(2px); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: blur(2px);/* 给图像设置高斯模糊 */
}2. css3 filter---brightness(%) sets the brightness of the image
.demo img{
-webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；值是100%以上，则图像更亮*/
}Rendering:
.demo img{
-webkit-filter: brightness(150%);
filter: brightness(150%);
}Rendering:
3. css3 filter---contrast(%) sets the image contrast
.demo img{
-webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: contrast(50%);
/* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。*/
}Rendering:
?x-oss-process=image/resize,p_40 "153982859616411How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
.demo img{
-webkit-filter: contrast(150%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: contrast(150%);
}Rendering: ?x-oss-process=image/resize,p_40 "153982867690064How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
4. css3 filter---drop-shadow() sets the image shadow
.demo img{
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
/* 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。*/
}Rendering:
?x-oss-process=image/resize,p_40 "153982900520195How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
filter:drop-shadow(h-shadow v-shadow blur spread color);h-shadow: Sets the horizontal offset of the shadow. Negative values will cause the shadow to appear on the left side of the element. v-shadow: Sets the vertical offset of the shadow. Negative values will cause the shadow to appear above the element. blur: Set the blur. The larger the value, the blurrier it is, and the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the boundary of the shadow is very sharp). spread: Positive values will cause the shadow to expand and become larger, negative values will cause the shadow to shrink; if not set, the default is 0 (the shadow will be the same size as the element). Note: Webkit, and some other browsers do not support spread, and will not render if added. color: Set the shadow color; if not set, the color value is based on the browser.
5. css3 filter---grayscale(%) sets the grayscale of the image
.demo img{
-webkit-filter: grayscale(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: grayscale(100%);
/* 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。*/
}Rendering:
?x-oss-process=image/resize,p_40 "153982965892422How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
6. css3 filter---hue-rotate(deg) sets the image hue rotation
.demo img{
-webkit-filter: hue-rotate(90deg); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: hue-rotate(90deg);
/* 给图像应用色相旋转，值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈*/
}Rendering: ?x-oss-process=image/resize,p_40 "153982993692826How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
7. css3 filter---invert(%) sets the inverse color of the image
.demo img{
-webkit-filter: invert(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: invert(100%);
/* 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。*/
}Rendering:
?x-oss-process=image/resize,p_40 "153983021563341How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
8. css3 filter---opacity(%) sets the image transparency
.demo img{
-webkit-filter: opacity(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: opacity(50%);
/* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。 */
}Rendering: ?x-oss-process=image/resize,p_40 "153983071715556How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
9, css3 filter---saturate(%) sets the saturation
.demo img{
-webkit-filter: saturate(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: saturate(50%);
/* 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。*/
}Rendering: ?x-oss-process=image/resize,p_40 "153983083495852How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
10. css3 filter---sepia(%) sets the image to brown (a retro old photo feel)
.demo img{
-webkit-filter: sepia(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: sepia50%);
/* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。 */
}Rendering: ?x-oss-process=image/resize,p_40 "153983098850477How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial!
The above is the detailed content of How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation). For more information, please follow other related articles on the PHP Chinese website!
css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。
PHP图片滤镜效果实现方法Sep 13, 2023 am 11:31 AMPHP图片滤镜效果实现方法，需要具体代码示例引言：在网页开发过程中，经常需要使用图片滤镜效果来增强图片的鲜艳度和视觉效果。PHP语言提供了一系列函数和方法来实现各种图片滤镜效果，本文将介绍一些常用的图片滤镜效果以及它们的实现方法，并提供具体的代码示例。一、亮度调整亮度调整是一种常见的图片滤镜效果，它可以改变图片的明暗程度。PHP中通过使用imagefilte
css3什么是自适应布局Jun 02, 2022 pm 12:05 PM自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。
css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。
css3动画效果有变形吗Apr 28, 2022 pm 02:20 PMcss3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。
css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。
css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PMcss3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。
利用PHP和GD库实现图片滤镜效果的方法Jul 12, 2023 pm 11:05 PM利用PHP和GD库实现图片滤镜效果的方法在现代社交媒体的时代，图片处理已经成为人们日常生活中的一个重要方面。为了让图片更吸引人、更有趣，许多人会添加各种滤镜效果。本文将介绍如何利用PHP和GD库实现图片滤镜效果的方法，并提供代码示例。GD库是一个开源的图形库，可以用来处理图片。它提供了一系列的函数来操作图片，包括裁剪、缩放、旋转以及添加滤镜效果等。在开始之前
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
