css mix-blend-mode屏幕错误从父小部件获取边界半径

Question

所以我有这个小部件，正如你在每个部分的左上角和右上角看到的，它激活了mix-blend-mode: screen，但它从一个div中获得了一个边界半径，这个半径是在主div中设置的。

​

​

HTML：

<div class="widget-box top-earners-widget">
    <div class="box-header">
        <h3 class="text-accent-2">Top Earners (<a class="dropdown-trigger" data-target='data-switcher-{{ @instance-guid }}'
                id="switcher_type"></a>)</h3>
    </div>
    <div class="top-earners" foreach="data" foreach-limit="5">
        <div class="earner">
            <img src="{{ item.image }}" class="user-image">
            <div class="white-bg"></div>
            <div class="black-bg"></div>
            <div class="marked-bg"></div>
            <div class="marked-bg-2"></div>
            <span class="name">{{ item.name }}</span>
            <span class="total" amount="{{ item.value }}">£{{ item.value }}</span>
        </div>
    </div>
</div>

萨斯：

.widget-box {
    border-radius: 0.4em;
    box-sizing: border-box;
    border: 1px solid $stroke;
    background: $background;
    height: 100%;
    position: relative;
    overflow: hidden;
    
    &.top-earners-widget,
    &.top-taskers-widget {
        .top-earners,
        .top-taskers {
            width: 100%;
            height: 15em;
            min-height: 15em;

            .earner,
            .tasker {
                width: 100%;
                height: 3em;
                display: flex;
                flex-direction: row;
                align-items: center;
                position: relative;

                .user-image {
                    height: 1.5em;
                    width: 1.5em;
                    z-index: 5;
                    position: absolute;
                    margin-left: 0.5em;
                }

                .name {
                    color: white;
                    padding-left: 2.5em;
                    position: absolute;
                    mix-blend-mode: difference;
                    z-index: 3;
                }
                .total {
                    z-index: 3;
                    margin-left: auto;
                    padding-right: 10px;
                    color: white;
                    mix-blend-mode: difference;
                }

                .white-bg {
                    background: $background;
                    background: white;
                    width: 100%;
                    z-index: 1;
                    height: 100%;
                    position: absolute;
                }

                .black-bg {
                    background: black;
                    width: 0;
                    z-index: 2;
                    height: 100%;
                    position: absolute;
                }

                .marked-bg {
                    background-color: $accent;
                    mix-blend-mode: screen;
                    width: 100%;
                    z-index: 4;
                    height: 100%;
                    position: absolute;
                    left: 0;
                }
                .marked-bg-2 {
                    background-color: $top-earners;
                    mix-blend-mode: screen;
                    width: 100%;
                    z-index: 4;
                    height: 100%;
                    position: absolute;
                    right: 0;

                }
                &:nth-child(2) .marked-bg {
                    background-color: lighten($accent, 10%);
                }
                &:nth-child(3) .marked-bg {
                    background-color: lighten($accent, 20%);
                }
                &:nth-child(4) .marked-bg {
                    background-color: lighten($accent, 30%);
                }
                &:nth-child(5) .marked-bg {
                    background-color: lighten($accent, 35%);
                }
            }
        }
    }
}

Answer 1

我发现问题与父对象的位置有关。因此，我将position: inherit;添加到div的子父目录中。

所以它现在看起来像这样。

&.top-earners-widget,
&.top-taskers-widget {
    position: inherit;
    ...
}