親と子のdivがあります。そして、親のテキストを子供の背景色の上に配置したいと思います。私の例をチェックしてください、そうすればもっと理にかなっています。私はこの外観を達成したいと思います:ゴール
現在、プログレスバーのラベルを覆わないように不透明度を使用しています。私の目標は、不透明度のない通常の色を使用し、ラベルをはっきりと表示することです。
<div class="outer">
<div class="inner"></div>
67 / 90
</div>
このようなもの?
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]
コメントを追加