Question

该网页具有如下所示的块列表。每个图块的背景色均以0.5不透明度内联完成。 0.5不透明度是问题所在。我需要它完全不透明。我正在使用时尚的Chrome扩展程序，并且需要使用外部CSS。

<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);>this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);>this is red</a>

我知道如何更改不透明度的唯一方法还包括将每个块的颜色更改为相同的颜色。但是列表中的每个块都有其自己的颜色，并且需要保留其自己的颜色。如何在不更改颜色的情况下更改所有块的不透明度？

我想要这样的东西：

a.pizza {
  background-color: rgba(, , , 1);
}

或者这样：

a.pizza {
  background-color-opacity: completely opaque !important;
}

Answer 1

我想出了一些办法。它不会使您恢复到100％的不透明度，但是非常接近。

问题在于，如果没有JavaScript，就无法找出颜色，并根据颜色采取措施。因此，您可以做的是，使用CSS的inherit作为子元素的背景色，并对其进行分层以增加主要元素的整体不透明度。

因此，通过添加两个继承背景颜色的伪元素并将它们放置在主要元素后面，您将获得非常接近100％的不透明度：

/* For the demo */
.pizza {  
  display: inline-block;
  vertical-align: top;      
  width: 120px;
  height: 120px;
}

/* Add relative positioning so we can position the absolute children correctly */
.pizza.new {
  position: relative;
}

/* Add two pseudo elements behind that inherit the background color */
.pizza.new::before,
.pizza.new::after {
  /* Sizing and positioning */
  display: block;
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Take the background color of the parent */
  background: inherit;
  /* Make sure they're not obscuring the content */
  z-index: -1;
}

<a class="pizza" style="background-color: rgba(255, 255, 0, 0.5);">
  This is yellow (before)
</a>

<a class="pizza" style="background-color: rgba(255, 0, 0, 0.5);">
  This is red (before)
</a>

<a class="pizza new" style="background-color: rgba(255, 255, 0, 0.5);">
  This is yellow (after)
</a>

<a class="pizza new" style="background-color: rgba(255, 0, 0, 0.5);">
  This is red (after)
</a>

Answer 2

您可以尝试使用mix-blend-mode对其进行近似，然后您将获得不透明的颜色：

.pizza {
  display: inline-block;
  padding: 50px;
  position: relative;
  z-index: 0;
}

.pizza:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: -1;
  mix-blend-mode: multiply;
}

body {
  background: linear-gradient(to bottom, grey 50%,blue 0);
}

<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);">this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);">this is red</a>

Answer 3

如果您不想自己编辑颜色，我想到的最简单的方法是使用CSS伪元素在每个div后面添加一个不透明的白色背景（或您想要的任何背景颜色），彩色的背景。您可以使用类似的

div.pizza::after {
   content: '';
   position: absolute;
   height: 100%; 
   width: 100%;
   top:0; left: 0;
   background: #FFF;
}

您可能需要根据特定的CSS调整z-index。

如何覆盖内联CSS背景颜色的不透明度，而不覆盖颜色？

3 个答案: