HTML에서는 필터 속성을 사용하여 이미지 투명도 효과를 설정할 수 있습니다. 이미지 요소에 "filter:opacity(%);" 스타일만 추가하면 됩니다. opacity() 함수의 값은 0입니다. % 및 100% 값은 완전한 투명도를 의미하고, 100% 값은 이미지에 변화가 없음을 의미합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
html 이미지 투명도 설정
<!DOCTYPE html>
<html>
<head>
<style>
#img1 {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}
#img2 {
-webkit-filter: opacity(60%); /* Chrome, Safari, Opera */
filter: opacity(60%);
}
</style>
</head>
<body>
<p>原图:</p>
<img src="pineapple.jpg" alt="Pineapple" width="200" >
<p>转化图像的透明程度:</p>
<img id="img1" src="pineapple.jpg" alt="Pineapple" width="200">
<img id="img2" src="pineapple.jpg" alt="Pineapple" width="200"">
</body>
</html>Rendering:
Description:
필터 속성은 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.
filter 속성에 사용할 수 있는 값 또는 함수:
| 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 중국어 웹사이트의 기타 관련 기사를 참조하세요! 본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환
<style>html { 글꼴 크기: calc(100vw / 3.75); }body { 글꼴 크기: 0.16rem; }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다.
그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법
Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법
다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
인기 튜토리얼
더>
최신 다운로드
더>
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
