不透明層が垂直方向にhtmlとcssの画像

Question

私はCSSでイメージを次のように表示しようとしましたが、以前は有用な結果がありませんでした。

私のCSSコード：

.geo-login-left{ 
    background-color: #7199bd; 
    background-image: url(../img/home-bg.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
    background-position: center; 
    text-align: center; 
    } 

.geo-login-left:before{ 
    background-image: url(../images/logo-white.jpg); 
    margin-top: 5px; 
    content : ""; 
    opacity: 0.3; 
    } 

.geo-login-left:after{ 
    background-image: url(../images/logo-white.jpg); 
    content : ""; 
    } 

Answer 1

画像なしの一つは次のように次のようになります。

body { 
 
    background-color: #0074D9; 
 
} 
 

 
.box { 
 
    background-color: white; 
 
    border-radius: 10px; 
 
    margin: 3em auto; 
 
    padding: 2em; 
 
    position: relative; 
 
    width: 24em; 
 
} 
 
.box:before, .box:after { 
 
    background: inherit; 
 
    border-top-left-radius: inherit; 
 
    border-top-right-radius: inherit; 
 
    content: ""; 
 
    display: block; 
 
    left: 50%; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: 100%; 
 
} 
 
.box:before { 
 
    height: 1em; 
 
    top: -1em; 
 
    width: calc(100% - 2em); 
 
} 
 
.box:after { 
 
    height: 2em; 
 
    top: -2em; 
 
    width: calc(100% - 4em); 
 
}

<div class="box"> 
 
    Block 
 
</div>