html - 在 css 中混合颜色与叠加划分

Question

我在 html 中有一个带有类框的 div，我使用了伪类 :after 用于框周围的蓝色边框和 :before 用于覆盖图像中的橙色框。我想要与图像完全相同的结果。我得到了盒子，我得到了图标，我得到了图像中的所有文本，我没有得到的是文本和图标中的银色效果。

预期结果

得到的结果

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;
        }

Answer 1

您可以在容器的 :hover 上使用 css 更改这些元素，但我不太确定您是否可以通过 position: absolute; 来更改颜色。橙色容器在这些元素上过渡...

如前所述，您的代码会很棒。