CSS中如何让背景颜色半透明

最新推荐文章于 2025-02-06 10:45:44 发布

世界是我的表象

最新推荐文章于 2025-02-06 10:45:44 发布

阅读量1.2w

点赞数 1

文章标签： css 背景颜色透明度 html

本文链接：https://blog.csdn.net/Capgras/article/details/100599696

版权

本文讲解了如何在HTML的<article>元素中正确设置半透明背景色，避免使用opacity属性导致文字和图片一同变暗的问题，推荐使用rgba颜色模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：HTML中要在<article>中（也就是卡片中间的联系方式）添加半透明的背景颜色

在这里插入图片描述

<article>
      <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>

错误示范
CSS：

article {
    background-color:#000; opacity:0.5; 
}

输出结果：

在这里插入图片描述

问题出现的原因：
我的目标是想表示半透明的黑色背景，也就是灰色透明背景。
但是我的css设置的是 background-color:#000; opacity:0.5;
这表示背景颜色是黑色，然后再半透明。但这导致整个<article>的内容都是半透明的。不仅仅是背景颜色半透明，文本和照片也是半透明。这就导致原本的文字被黑色覆盖掉了，再半透明时是看不到的。所以需要把opcity：0.5；给删除。

让背景半透明只有一个办法，就是用rgba颜色
background: rgba(0, 0, 0, 0.5)

解决方法：
CSS

article {
    background: rgba(0, 0, 0, 0.5);
}```

输出结果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20190907160636764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcGdyYXM=,size_16,color_FFFFFF,t_70)