如何在背景不透明度为 0.6 的元素上设置文本？

Posted 2023-03-06

【中文标题】如何在背景不透明度为 0.6 的元素上设置文本？

【英文标题】：How to set text over element with background opacity 0.6?

【发布时间】：2021-12-13 02:10:24

【问题描述】：

.c
    display: flex;
    padding-top: 18em;
    .backgroundDiv
        background: url("/images/DSC8253.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center ;
        height: 20em;
        opacity: 0.6;
         position: absolute;
         width: 100%;
         z-index: -1;
         
    

.bigText
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    top:2em;

 <section class="c">
         <div class="backgroundDiv"></div>
         <div class="bigText">
             <p>Pilki-HUILKI</p>
             </div>
     </section>

【问题讨论】：

您是否尝试过使用 rbga() 颜色作为 bg 而不是不透明度？ Opacity 会改变 div 中文本的不透明度，rbga() 只会改变背景。

@NathanielFlick 这适用于背景图片吗？您的意思是应该使用 rgba() 值设置哪个属性？

您是否使用了预处理器，因为它看起来不像 CSS。但是，当我将其设为 CSS 时，文本在图像上方就可以了。你能描述一下你想要的结果吗？

rgba 将为 colot 设置不透明度它应该如何处理图像？我用 sass 是的。有一个带有完整代码 atm 的 git 文件夹

@Corrl 哎呀我忘了那里有图像，而不是颜色。

【参考方案1】：

在 css 文件中，您可以像下面这样输入（只是小改动）

.c 
  display: flex;
  position: relative;
  height: 100vh;


.backgroundDiv 
  background: url('/images/DSC8253.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 20em;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: -1;

.bigText 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  text-transform: uppercase;
  font-size: 3em;
  font-family: cursive;
  font-weight: 600;

我使用位置 absolute 将文本置于背景之上，然后使用变换使其居中

【讨论】：

这是一种常见的做法吗？或者只是我奇怪的事情的解决方案？:)

@DeanWinchester88 我在我的公司工作，这种方式很受欢迎，我推荐你

谢谢。想成为初级 FE。是否有任何用于常见情况的作弊列表，如汉堡菜单模板、模态窗口等？我正在学习首先构建移动设备

Pos absolute 将图标从文档流中取出，因此它不会像 bg 那样获得相同的不透明度 (.6)。

好吧，或者我错了，或者它无法按预期工作codepen.io/DeanWinchester88/pen/mdMwBJq