html、cssで簡単なプログレスバーを作成しようとしています。しかし、私のdivは重複しています

Istvan Szabo

親と子のdivがあります。そして、親のテキストを子供の背景色の上に配置したいと思います。私の例をチェックしてください、そうすればもっと理にかなっています。私はこの外観を達成したいと思います:ゴール

現在、プログレスバーのラベルを覆わないように不透明度を使用しています。私の目標は、不透明度のない通常の色を使用し、ラベルをはっきりと表示することです。

 <div class="outer">
      <div class="inner"></div>
      67 / 90
 </div>

https://jsfiddle.net/sjr40oqt/5/

ZorgoZ

このようなもの?

div.outer {
    border-radius: 25px;
    border: 3px solid black;
    background-color: gray;
    width: 40%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    height: 1em;
}

div.inner {
    height: 26px;
    background-color: green;
    width: calc((67 / 90) * 100%);
    position: absolute;
}

div.label {
    position: absolute;
    width: 100%;
}
<div class="outer">
  <div class="inner"></div>
  <div class="label">67 / 90</div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

私は自分のサーバーを実行しようとしているときにプログラムを持っていますそれは私がDjangoにかなり慣れていないので非常に単純なサーバーです

分類Dev

Unity Movement-わかりました、それで私はエレベーターの動きのための簡単なスクリプトを作成しようとしています

分類Dev

サーバーはリクエストが悪いと返していますが、私の簡単な投稿は正しいようです

分類Dev

マルチプロセスでプログラムを高速化しようとしているときに、複数のプロセスが単一のプロセスよりも遅いのはなぜですか?Pythonでプールしますか?

分類Dev

私はmlsサイトから不動産リストを取得しようとしていますが、美しいスープで運が良かったのですが、セレンの方が簡単かもしれません。

分類Dev

簡単なボールバウンス実験用のクラスを作成しようとしていますが、どこが間違っていますか?

分類Dev

私はSwiftを学んでいて、簡単なサイコロロールアプリを作成していますが、コードのどこが悪いのかわからないようです

分類Dev

簡単な暗号化プログラムを作成しようとしています

分類Dev

私は簡単なシューティングゲームプログラムの特定の方法を作成して理解するのに苦労しています

分類Dev

私のVPSプロバイダーはUbuntu18.04ミニマルのみを提供していますが、標準が必要です-簡単なアップグレードパスはありますか?

分類Dev

PL / SQL-簡単なプロシージャを作成しようとしています

分類Dev

Java で簡単なプログラムを作成して、else if ステートメントを使用して送料を計算しようとしていますが、完全に途方に暮れています。

分類Dev

Rで簡単な度数分布表を作成しようとしています

分類Dev

Rstudioの簡単なパスワード保護コードを作成しようとしています

分類Dev

単純なスタックプッシュとポップを使用して文字列を反転しようとしています。しかし、私は理解できないいくつかのエラーを受け取ります

分類Dev

私はPythonでオブジェクトとクラスを学習していて、さまざまなラダーラングで動物の機能を印刷する必要があるプログラムを作成しようとしました。

分類Dev

DetailViewを介してURLパスを作成しようとしていますが、HTMLページで重複する値を取得しています

分類Dev

私はReactJsにかなり慣れていないので、ユーザーが選択した画像ファイルをレンダリングしようとしています。しかし、私は惨めに失敗しています

分類Dev

andengineを使用してAndroidで簡単なゲームのハノイの塔を作成しようとしています。例外を下回っています。

分類Dev

簡単なATMプログラムを作成しようとしていますが、迷子になっています

分類Dev

アプリケーションをデバッグしようとしたときに、どのように私は、「リモートプロセスに接続できませんでした」修正していますか?

分類Dev

指定されたテキストファイルからすべての空でない行を新しいテキストファイルにコピーする単純なプログラム(C)を作成しようとしています

分類Dev

このプログラムが有効なのはなぜですか?構文エラーを作成しようとしていました

分類Dev

2つのシンボルのピラミッドを出力する簡単なプログラムを作成するにはどうすればよいですか?1つはC ++のループを使用してもう1つとして2回印刷されますか?

分類Dev

私は2つのことをするjavascriptで簡単なボタンを作ろうとしています

分類Dev

ループを反復してx個のランダムな長方形を作成しようとしていますが、重複していません

分類Dev

ブートストラップが私のCSSと重複しています

分類Dev

簡単な在庫管理プログラムを設定しようとしています

分類Dev

簡単なJQuery / JavaScript計算を作成しようとしています

Related 関連記事

  1. 1

    私は自分のサーバーを実行しようとしているときにプログラムを持っていますそれは私がDjangoにかなり慣れていないので非常に単純なサーバーです

  2. 2

    Unity Movement-わかりました、それで私はエレベーターの動きのための簡単なスクリプトを作成しようとしています

  3. 3

    サーバーはリクエストが悪いと返していますが、私の簡単な投稿は正しいようです

  4. 4

    マルチプロセスでプログラムを高速化しようとしているときに、複数のプロセスが単一のプロセスよりも遅いのはなぜですか?Pythonでプールしますか?

  5. 5

    私はmlsサイトから不動産リストを取得しようとしていますが、美しいスープで運が良かったのですが、セレンの方が簡単かもしれません。

  6. 6

    簡単なボールバウンス実験用のクラスを作成しようとしていますが、どこが間違っていますか?

  7. 7

    私はSwiftを学んでいて、簡単なサイコロロールアプリを作成していますが、コードのどこが悪いのかわからないようです

  8. 8

    簡単な暗号化プログラムを作成しようとしています

  9. 9

    私は簡単なシューティングゲームプログラムの特定の方法を作成して理解するのに苦労しています

  10. 10

    私のVPSプロバイダーはUbuntu18.04ミニマルのみを提供していますが、標準が必要です-簡単なアップグレードパスはありますか?

  11. 11

    PL / SQL-簡単なプロシージャを作成しようとしています

  12. 12

    Java で簡単なプログラムを作成して、else if ステートメントを使用して送料を計算しようとしていますが、完全に途方に暮れています。

  13. 13

    Rで簡単な度数分布表を作成しようとしています

  14. 14

    Rstudioの簡単なパスワード保護コードを作成しようとしています

  15. 15

    単純なスタックプッシュとポップを使用して文字列を反転しようとしています。しかし、私は理解できないいくつかのエラーを受け取ります

  16. 16

    私はPythonでオブジェクトとクラスを学習していて、さまざまなラダーラングで動物の機能を印刷する必要があるプログラムを作成しようとしました。

  17. 17

    DetailViewを介してURLパスを作成しようとしていますが、HTMLページで重複する値を取得しています

  18. 18

    私はReactJsにかなり慣れていないので、ユーザーが選択した画像ファイルをレンダリングしようとしています。しかし、私は惨めに失敗しています

  19. 19

    andengineを使用してAndroidで簡単なゲームのハノイの塔を作成しようとしています。例外を下回っています。

  20. 20

    簡単なATMプログラムを作成しようとしていますが、迷子になっています

  21. 21

    アプリケーションをデバッグしようとしたときに、どのように私は、「リモートプロセスに接続できませんでした」修正していますか?

  22. 22

    指定されたテキストファイルからすべての空でない行を新しいテキストファイルにコピーする単純なプログラム(C)を作成しようとしています

  23. 23

    このプログラムが有効なのはなぜですか?構文エラーを作成しようとしていました

  24. 24

    2つのシンボルのピラミッドを出力する簡単なプログラムを作成するにはどうすればよいですか?1つはC ++のループを使用してもう1つとして2回印刷されますか?

  25. 25

    私は2つのことをするjavascriptで簡単なボタンを作ろうとしています

  26. 26

    ループを反復してx個のランダムな長方形を作成しようとしていますが、重複していません

  27. 27

    ブートストラップが私のCSSと重複しています

  28. 28

    簡単な在庫管理プログラムを設定しようとしています

  29. 29

    簡単なJQuery / JavaScript計算を作成しようとしています

ホットタグ

アーカイブ