在html中可以使用filter属性和blur()函数来让照片变模糊，只需要给img照片添加“filter: blur(px);”代码样式即可。filter属性用于定义图片元素的可视效果，设置值为“blur(值)”时可以给图像设置高斯模糊。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在HTML中，可以使用filter 属性，设置值为“blur(px)”来让照片变模糊。
css filter 属性
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
blur(px) ：给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
padding: 20px;
position: relative;
overflow: hidden;
}
img {
height: 200px;
transition: .5s ease-in-out;
}
.container div {
width: 300px;
overflow: hidden;
float: left;
margin-left: 40px;
}
.blur img {
filter: blur(15px);
-webkit-filter: blur(15px);
}
.blur img:hover {
filter: blur(0);
-webkit-filter: blur(0);
}
</style>
</head>
<body>
<div class="blur container">
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548676269108&di=64d110c6c0c15d9bc77c7ffd4f049f1b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6a63f6246b600c33d32b0328174c510fd8f9a184.jpg" />
</div>
</div>
</body>
</html>效果图：
【推荐教程：CSS视频教程 】
Filter 函数
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
| Filter | 描述 |
|---|---|
| none | 默认值，没有效果。 |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 |
| brightness(%) | 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 |
| contrast(%) | 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 |
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 例如： filter: url(svg-url#element-id) Salin selepas log masuk 更多编程相关知识，请访问：编程视频！！ Atas ialah kandungan terperinci html代码如何让照片变模糊. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP! 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
Artikel terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM
<style>html { font-size: calc(100vw / 3.75); }badan { saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap
Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Topik-topik yang berkaitan
Lagi>
|
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
