HTML 코드로 사진을 흐릿하게 만드는 방법
- 青灯夜游원래의
- 2021-03-04 11:22:134862검색
HTML의 필터 속성과 Blur() 함수를 사용하여 사진을 흐리게 만들 수 있습니다. img 사진에 "filter:blur(px);" 코드 스타일을 추가하기만 하면 됩니다. 필터 속성은 이미지 요소의 시각적 효과를 정의하는 데 사용됩니다. 값을 "blur(value)"로 설정하면 이미지에 가우시안 블러를 설정할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
HTML에서는 필터 속성을 사용하고 값을 "blur(px)"로 설정하여 사진을 흐리게 할 수 있습니다.
css 필터 속성
필터 속성 은 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.
blur(px) : 이미지에 가우시안 블러를 설정합니다. "반지름" 값은 가우스 함수의 표준 편차 또는 화면에서 얼마나 많은 픽셀이 혼합되는지를 설정하므로 값이 클수록 더 흐릿해집니다. 설정된 값이 없으면 이 매개변수는 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" / alt="HTML 코드로 사진을 흐릿하게 만드는 방법" >
</div>
</div>
</body>
</html>렌더링:
【추천 튜토리얼: CSS 비디오 튜토리얼】
필터 기능
참고: 필터는 일반적으로 백분율을 사용합니다(예: 75 %) 물론이죠 소수점을 사용하여 표현할 수도 있습니다(예: 0.75).
| Filter | Description |
|---|---|
| none | 기본값, 효과 없음. |
| blur(px) | 이미지에 가우시안 블러를 설정하세요. "반경" 값은 가우스 함수의 표준 편차, 즉 화면에서 얼마나 많은 픽셀이 혼합되는지를 설정하므로 값이 클수록 흐려집니다. 설정된 값이 없으면 기본값은 0입니다. 이 매개변수는 CSS 길이 값을 설정할 수 있지만 백분율 값은 허용되지 않습니다. |
| 밝기(%) | 이미지에 선형 곱셈을 적용하여 더 밝거나 어둡게 표시되도록 합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 다른 값은 선형 승수 효과에 해당합니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 값이 설정되지 않은 경우 기본값은 1입니다. |
| contrast(%) | 이미지의 대비를 조정하세요. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값은 100%이고 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 더 낮은 비교가 사용된다는 의미입니다. 값이 설정되지 않은 경우 기본값은 1입니다. |
| drop-shadow(h-shadow v-shadow Blur Spread color) |
이미지에 그림자 효과를 설정합니다. 그림자는 이미지 아래에 합성되며 특정 색상으로 칠할 수 있는 매트의 흐림, 오프셋 버전을 가질 수 있습니다. 이 함수는 "inset" 키워드가 허용되지 않는다는 점을 제외하고 注意: 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) |
更多编程相关知识，请访问：编程视频！！
위 내용은 HTML 코드로 사진을 흐릿하게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!