2

ここに画像の説明を入力

css を使用してこの進行状況バーをシミュレートしようとしています。これには 2 つの背景があり、背景の 1 つはテキストの後ろのバーの一部のみを覆う必要があります。その幅は、% を変更するために簡単に操作できる必要があります。私は完全なバーから始めましたが、パーセンテージ部分を追加する方法が本当にわかりません. 絶対配置なしで行うことは可能ですか?

<div class="bar">
    Progress: 60%
</div>

.bar {
    border: 1px solid black;
    color: white;
    display: table-cell;
    width: 250px;
    height: 50px;
    text-align: center;
    vertical-align: middle;        
    background: #003458;
    background: -moz-linear-gradient(top, #003458 0%, #001727 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727));
    background: -webkit-linear-gradient(top, #003458 0%,#001727 100%);
    background: -o-linear-gradient(top, #003458 0%,#001727 100%);
    background: -ms-linear-gradient(top, #003458 0%,#001727 100%);
    background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}

フィドル

4

1 に答える 1

5

例のように明るくしたい場合は、2 つのグラデーションを重ねます。

.bar {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 60%),
                linear-gradient(to bottom, #003458 0%,#001727 100%);
}

ここにデモがあります。(ベンダー接頭辞を削除しました。最終的なコードで再度追加する必要があります)

しかし問題は、バーの大きさをどのように知るかということです。値ごとに複数のクラスを作成するか、これに JavaScript を使用できますが、もちろんどちらのソリューションも適切ではありません。他の人が言ったように：内部要素を使用してください：

<div class="bar">
    <p>Progress: 60%</p>
    <span style="width: 60%"></span>
</div>

CSS:

.bar {
    position: relative;
    border: 1px solid black;
    color: white;
    display: block;
    width: 250px;
    text-align: center;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}

.bar > span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
}

.bar > p {
    display: inline;
    position: relative;
    z-index: 1;
}

これにより、の style 属性width内でを設定することにより、値のスタイルを設定できます。<span/>ところで: を変更しdisplay: table-cell、テキストを垂直方向に中央揃えにblock追加しました。line-heightこの場合、改行がないため、これでうまくいくはずです。それに加えて、position: relative表のセルでは何もしません。

ここにデモがあります。

于 2013-05-24T21:36:33.707 に答える