有什么方法可以使子元素变得不透明，而父元素在HTML / CSS中仍然是半透明的？

Question

我想使嵌套元素（.portrait）不透明，而父级保持半透明。下面的代码段（用SCSS编写）。

    &-branding {
        opacity: 0.9;
        background: $primary-color;
        transform: translate3d(0, 100%, 0);
        @include easeOut;
        &.show {
            // Slide in from bottom
            transform: translate3d(0, 0, 0);
        }
        .portrait {
            width: 250px;
            height: 250px;
            background: url("../../img/portrait.jpg");
            border-radius: 50%;
            border: solid 3px $secondary-color;
        }
    }