Question

我有一个Bootstrap 4网站，我有以下hmtl代码

<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto>
            <h2>Example heading text</h2>
            <h6>Example subheading text</h6>
        </div>
    </div
</div>

默认情况下，<h2> - 元素的颜色为黑色。现在我在后台计算一些依赖于这个文本的东西。让我们说计算的结果是75％我想将<h2> - 元素中的文本颜色更改为红色而不是整个文本 - 只有文本直到宽度为75％整个文字宽度。（参见我添加的示例图片）

并且在文本下面应该有一个进度条（所以我的示例代码在<h2> - 和<h6> - 元素之间。这个条形应该用与红色相同的红色填充。上面的文字，应该用该颜色填充到与文本相同的宽度（在示例中为75％）。

我如何使用Javascript或jQuery执行此操作？或者我可以使用css唯一的解决方案吗？但请记住，我在我的网站上有多个这样的部分，我必须这样做，并且对于每个条目，可能有其他百分比值。两个元素应同时像滑块或线性效果一样着色。

这是一张有希望更好地理解我想要的图片。如果需要进一步的详细信息，请告诉我。

Answer 1

我们的想法是，您可以从进度条查询当前值，并将该值作为两个颜色停止的颜色停止值传递。有点模仿进度条。

我根据您提供的代码添加了一些示例代码。

我在这个例子中没有使用进度条。

相反，我使用for循环和警报来说明这个想法是如何工作的。循环带来迭代，警报允许您停止并查看颜色进展。

来自for循环的迭代可以表示使用进度条跟踪的进程，该进度条在任何给定时间都具有值。通过将该值插入渐变中，您的彩色文本将会更新。

同样，这只是一个想法。

<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style>
        .colorIt {
            display: inline-block;
            /*background-image: linear-gradient(to right, green 10%, black 10%);*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
        }

        h2 {
            font-size: 30px;
            font-weight: bold;
        }

    </style>
    <script>
        // create script to inc and dec the color-stops on the gradient

        $(document).ready(function () {
            adjustColorStops();
        });

        function adjustColorStops()  //x=color-stop start color, y=color-stop end color values
        {
            // create a script to set the color-stops of the gradient
            // this is for the purpose of covering the left (green) color across to the right, eliminating the black color eventially
            var i;
            for (i = 0; i < 110; i++)
            {
                alert(i);   // this is to slow things down so that you can see the increments of the color
                $(".colorIt").css("background-image", "linear-gradient(to right, green " + i + "%, black " + i + "%)");
                i += 9;
            }
            return;
        }
    </script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <h2 class="colorIt">Example heading text</h2>
                <h6>Heading text is filled with a gradient.</h6>
                <!--<div class="progressBarDiv"></div>-->
            </div>
        </div>
    </div>


</body>
</html>

将文本颜色更改为特定宽度并结合进度条？

1 个答案: