如何覆蓋內聯CSS背景顏色的不透明度，而不覆蓋顏色？

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。