html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명

寻∝梦

Sep 04, 2018 am 10:39 AM

html5 progress

이 글에서는 html5의 새로운 진행률 표시줄 태그의 스타일 분석을 소개하고, html5 진행률 태그를 통해 진행률 표시줄의 색상을 변경하는 방법을 설명합니다. 다음으로 이 글을 살펴보겠습니다

우선 html5 진행 태그 소개에 대해 알아봅시다:

진행률은 진행률 표시줄을 정의하는 HTML5의 새로운 요소로, 파일 업로드 진행률, 파일 다운로드 진행률을 표시하는 데 사용할 수 있으며 로딩 상태로도 사용할 수 있습니다. 로딩 바.

팁: 작업 진행 상황을 표시하려면 javaScript와 함께 태그를 사용하세요.

참고: 태그는 측정항목(예: 디스크 공간 사용량 또는 쿼리 결과)을 나타내는 데 적합하지 않습니다. 무게와 단위를 나타내려면 대신 태그를 사용하세요.

html5 진행률 진행률 표시줄 구문:

<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

로그인 후 복사

html5 진행률 태그의 예를 준비해 보겠습니다. # 🎜 🎜#

<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
        width: 168px;
    height: 5px;
}
progress::-webkit-progress-bar
{
       background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
     background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>

로그인 후 복사

설명, Chrome 브라우저 진행 상황은 다음 구조로 렌더링됩니다

progress

:-webkit-progress-bar 모든 진행# 🎜🎜## 🎜🎜#:-webkit-progress-value 진행 완료

이 두 의사 요소로 스타일을 지정하세요.

하지만 IE10과 같은 다른 브라우저에서는 다릅니다. 이 두 의사 요소는 색상 스타일을 직접 사용하여 완료된 진행의 색상을 수정할 수 있으며 전체 진행은 다음과 같습니다. background# 🎜🎜#

FireFox에서 진행률 표시줄은 완료된 진행률을 나타내고 배경은 전체 진행률을 나타냅니다. 그러나 Opera에서는 이 스타일이 브라우저 기본 스타일일 수만 있습니다.

따라서 호환성 작성 방법은 다음과 같이 생각해볼 수 있습니다.

progress
{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
}
progress::-webkit-progress-bar
{
   background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
     background:orange;
}

로그인 후 복사

위는 진행중인 컬러 CSS 스타일에 대한 코드입니다. bar 표시 효과는 다음과 같습니다. ：

좋아, 위는 HTML5에서 새로운 진행 태그를 사용하고 색상을 변경하는 방법에 대한 기사입니다. .궁금하신 점은 아래로 문의주세요.

html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명 【에디터 추천】