在css中混合顏色與覆蓋區域

我在html中使用class box創建了一個div，並且我使用了僞類：之後是圍繞框的藍色邊框，以及：用於覆蓋圖像中的橙色顏色框之前。我想要與圖像完全相同的結果。我得到了箱子我得到了圖標，我得到了圖像中的所有文本，我沒有得到的是文本和圖標中的銀色效果。在css中混合顏色與覆蓋區域

預期結果

得到的結果

HTML

enter code here 
<section class="section why-us"> 
    <div class="container"> 
     <div class="box left bordered-box selected"> 
      <img src="images/why-us-icon8.png" class="section-img"> 
      <h2>Online Research</h2> 
     </div> 
    </div> 
</section>

CSS

.why-us .box{ 
      background:#F1F1F1; 
      margin-bottom:30px; 
      height:250px; 
     } 
     .bordered-box h2{ 
      color:#2c3e50; 
     } 
     .bordered-box:before{ 
      content:''; 
      position:absolute; 
      top:10px; 
      left:10px; 
      width:90%; 
      height:90%; 
      border:2px solid #B2E9F1; 
      z-index:1; 
     } 
     .selected:after{ 
      content:''; 
      position:absolute; 
      top:107px; 
      width:260px; 
      height:142px; 
      background:#E67E22; 
      background:rgba(255,140,0,0.4); 
      opacity:0.9; 
     }

來源

2017-07-21 designerdarpan

請提供您的代碼 –

':: after'是**不是**僞類...它是一個**僞元素** –

我的壞！無論如何，我確實認爲你得到了我的意思 – designerdarpan

你可以改變這些元素與CSS：容器的懸停，但我也不太清楚，你可以通過位置來改變顏色：絕對的;橙色的顏色容器在這些元素上移動...

如已經要求，您的代碼會很好。

來源

2017-07-21 15:25:04

在css中混合顏色與覆蓋區域

回答

相關問題