CSS 스타일에서 투명도를 설정하는 방법
- 清浅원래의
- 2018-12-06 11:11:576152검색
CSS 스타일에서 투명도를 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img를 통해 이미지를 만듭니다. 마지막으로 "opacity: value | 상속;".
이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.
CSS에서는 opacity 속성을 추가하여 요소의 투명도를 변경할 수 있습니다. 불투명도 값은 0~1이며, 값이 작을수록 투명해집니다.
페이지에서 우리는 CSS의 스타일을 투명도를 설정하고 페이지를 아름답게 하는 데 사용하는 경우가 많습니다. 오늘은 CSS의 불투명도 속성을 사용하는 방법을 소개하겠습니다. 이는 특정 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다 #🎜 🎜#
# 🎜🎜#opacity attributeopacity: value|inherit;
value: 불투명도를 설정하는 데 사용됩니다. 0.0(완전 투명)에서 1.0(완전 불투명)
inherit: 불투명도 속성의 값은 상위 요소에서 상속되어야 합니다.
#🎜🎜 ##🎜🎜 #
예:
이미지를 불투명하게 설정
<body> 未设置透明度： <img src="images/5.jpg" style="width:100px;height:100px;"> 设置了透明度： <img src="images/5.jpg" style="opacity: 0.6;width:100px;height:100px;"> </body>
효과는 다음과 같습니다.
#🎜🎜 #
# 🎜🎜#
참고:
IE9, Firefox, Chrome, Opera 브라우저에서 투명도를 설정하려면 불투명도 속성을 사용하세요. 불투명도 속성은 0.0에서 1.0 사이의 값으로 설정할 수 있습니다. 값이 작을수록 투명해집니다.
IE8 및 이전 버전에서는 필터 필터:alpha(opacity=x)를 사용하며, x는 0에서 100까지의 값을 가질 수 있습니다. 값이 작을수록 투명해집니다.
【추천 강좌:CSS 강좌
】#🎜🎜 #사례 공유불투명도 속성을 사용하여 아래로 향하는 화살표 만들기
이 경우는 CSS3의 animation animation 속성을 이용하여 animation 속성의 값을 설정하여 애니메이션 실행 시간과 애니메이션 진행 중 투명도 변화를 지정하는데 필요합니다. <style>
.box
{ -webkit-animation:box 5s infinite;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes box
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<img src="images/jiantou.png">
</div>
</body>효과 그림은 다음과 같습니다. 🎜## 🎜🎜#
요약: 위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되길 바랍니다.
위 내용은 CSS 스타일에서 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!