在css中混合颜色与重叠的部门

Question

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

预期结果

获得的结果

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

您可以使用css更改这些元素：悬停容器，但我不太确定您可以通过位置更改颜色：绝对;橙色容器过渡到这些元素......

根据要求，您的代码会很棒。