英文:
CSS text in the foreground with background color with a opacity
问题
我有一个任务，需要在项目中实现以下屏幕。
项目框的灰色背景颜色是通过透明度设置为20%和背景颜色为#FDFFFF来实现的。
我已经添加了以下代码。
.card {
background-color: #171B2D;
border: 1px solid #1DFB9D;
}
.card h1 {
color: whitesmoke;
}
.item {
padding: 1rem;
background-color: #FDFFFF;
opacity: 0.2;
}
.item-title {
color: #1DFB9D;
z-index: 5;
}
.item-desc {
color: #FDFFFF;
z-index: 5;
}
<div class="card">
<h1>Activities log</h1>
<div class="item">
<div class="item-title">01-01-2023 | 00:00:00</div>
<div class="item-desc">Username: Order note 1</div>
</div>
</div>
透明度应该添加到背景中，文本“01-01-2023 | 00:00:00”和“Username: Order note 1”应该显示在前景中。我已经添加了z-index，但似乎没有起作用。如何使用CSS实现这一点？
英文:
I have a task to implement below screen in a project.
The item box's gray background color is achieved by an opacity of 20% and a background color of #FDFFFF.
I have added the following code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.card{
background-color:#171B2D;
border: 1px solid #1DFB9D;
}
.card h1 {
color: whitesmoke;
}
.item{
padding: 1rem;
background-color:#FDFFFF;
opacity: 20%;
}
.item-title{
color: #1DFB9D;
z-index: 5;
}
.item-desc{
color:#FDFFFF;
z-index: 5;
}
<!-- language: lang-html -->
<div class="card">
<h1>
Activities log
</h1>
<div class="item">
<div class="item-title">01-01-2023 | 00:00:00</div>
<div class="item-desc">Username: Order note 1</div>
</div>
</div>
<!-- end snippet -->
Opacity should be added to the background and the Texts "01-01-2023 | 00:00:00", "Username: Order note 1" should be on the foreground. I have added zIndex also but seems it is not working. How do I achieve this with CSS?
答案1
得分: 1
要实现预期结果，请将opaccity添加到背景，但不要添加到文本，如下所示。
问题在于对item类的20%不透明度会导致标题描述的颜色淡出。
将背景颜色#fdffff更换为带有不透明度的rgba(255,255,255, 0.2)将解决此问题。
英文:
To achieve expected result, add opaccity to only background but not to the text as below
Issue is that opacity of 20% on item class is causing the color to title desc fade out
Replacing #fdffff background color to rgba(255,255,255, 0.2) with opacity will resolve the issue
codepen for reference- https://codepen.io/nagasai/pen/YzjgjVX
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.card {
background-color: #171b2d;
border: 1px solid #1dfb9d;
}
.card h1 {
color: whitesmoke;
}
.item {
padding: 1rem;
background-color: rgba(255,255,255, 0.2);
}
.item-title {
color: #1dfb9d;
z-index: 5;
}
.item-desc {
color: #fdffff;
z-index: 5;
}
<!-- language: lang-html -->
<div class="card">
<h1>
Activities log
</h1>
<div class="item">
<div class="item-title">01-01-2023 | 00:00:00</div>
<div class="item-desc">Username: Order note 1</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论