在html和css中垂直不透明圖層的圖像

我試圖在css中創建一個像下面的圖像的東西，但之前沒有使用有用的結果。在html和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 : ""; 
    }

來源

2016-12-14 koku19

可以請你分享搗鼓這個 – sameer

這裏是類似的解決方案是起訴http://stackoverflow.com/questions/41048201/3-image-layout-center-image-larger-and-higher-z-index/41048391#41048391。你可以重新排列圖像，並用z-indices指向 – Banzay

https://jsfiddle.net/95h82gha/ – Banzay

一個沒有圖像將會像：

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>

來源

2016-12-14 11:11:20

在html和css中垂直不透明圖層的圖像

回答

相關問題