如何在不恢复默认设置的情况下更改加载栏背景？

Question

首先这是我在 HTML 和 CSS 方面使用的代码：

progress {
     color-scheme: light dark;
     accent-color: RGBA(30,170,255,1);
    }

 <!DOCTYPE html>
    <html lang = en>
    <head>
         <meta charset = UTF-8>
         <title>About Me</title>
    <link rel="stylesheet" href="site.css">
    </head>
    <body>
    <p> Progress in life goals (5%) 
    <progress id="progressbar1" value="5" max="100"></progress>
    </p> 
    </body>
    </html>

对于我的问题，方案设置没有任何变化，重音仅影响加载进度颜色。

当我想要的是浅灰色背景时，我的加载栏目前看起来是圆形的，带有蓝色进度条和黑色背景，但是当我尝试指定背景颜色时，即使我尝试，进度条也会变为绿色，灰色背景和矩形其他东西，比如蓝色背景。我该如何解决？根据 W3.org，CSS 和 HTML 代码均有效。我目前正在使用 Microsoft Edge 浏览器测试我的代码，虽然我希望任何解决方案都能在大多数浏览器上运行，但我不关心它是否在 Internet Explorer 上运行。

例如：对比这个：

我尝试在 CSS 文件中使用不同的背景、添加透明度、更改配色方案属性、定义加载栏形状以及使用内部样式标签而不是 CSS 代码的外部文件。

Answer 1

我从一个最初没有出现的相关问题中找到了代码中的解决方案：

 filter: alpha(opacity=60);
   opacity: 0.6;

我需要做的就是添加代码并使用深蓝色阴影进行补偿。请参阅：如何使用 CSS 降低元素背景的不透明度？

Answer 2

在下面的例子中，我分享了代码和解释。所以你可以在不同的浏览器中设置进度元素的样式。

 progress {
        /* style rules */
        background-color: pink;
        /* chrome, edge, opera, safari apply "webkit" stylesheet for progress bar*/
        -webkit-appearance: none;
        accent-color: orangered; /* sep 2021 - mar 2022 */
        height: 20px;
        border-radius: 10px;
}
progress::-webkit-progress-bar {
  /* style rules background in chrome, edge, opera */
  background-color: pink;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  /* style rules chrome edge opera value bar colour */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}
progress::-moz-progress-bar {
  /* style rules ff equivalent to ::-webkit-progress-value */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}

<!DOCTYPE html>
    <html lang = en>
    <head>
         <meta charset = UTF-8>
         <title>About Me</title>
    <link rel="stylesheet" href="site.css">
    </head>
    <body>
    <p> Progress in life goals (5%) 
    <progress id="progressbar1" value="5" max="100"></progress>
    </p> 
    </body>
    </html>

如何在不恢复默认设置的情况下更改加载栏背景？

问题描述投票：0回答：2

2个回答

最新问题

如何在不恢复默认设置的情况下更改加载栏背景？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2