私は私のイメージの半分以上グラデーション効果を作成しようとしていますイメージ

Question

の半分にグラデーション効果を作成する方法を、私は私のイメージ

.tinted-image { 
    background: 
    /* top, transparent red */ 
    rgba(255, 0, 0, 0.25), 
    /* bottom, image */ 
    url(image.jpg); 
} 

を完全にグラデーションオーバーレイ効果を与えるこれを見つけたが、私どのように私のイメージの半分だけにこの効果を適用することができますか、私はオンラインで検索したが、私が探しているものを正確に見ていないので、私は投稿することを決めた。私のイメージの半分に

私はそこ

水平垂直方向においない意味この

Answer 1

複数の背景やグラデーションに適したカラーストップのアイデアを持っている人。

.tinted-image { 
 
    width: 460px; 
 
    height: 300px; 
 
    border: 1px solid grey; 
 
    background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 50%, transparent 50%), url(http://www.fillmurray.com/460/300); 
 
    margin: auto; 
 
}

<div class="tinted-image"></div>

Answer 2

HTML

<img class="tinted-image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"/> 

CSS

.tinted-image { 
    width: 150px; 
    background: linear-gradient(to bottom,rgba(255,0,0,0.5),rgba(255,0,0,0), transparent) 
} 

そして私はただの情報のため、このようにそれを行うだろうソースとして画像。

編集：demo

Answer 3

ここでは、実施例です。あなたは、おそらく二つの異なる要素をしたい

html, body { 
    width: 100%; 
    height: 100%; 
} 

.tinted-image { 
    width: 100%; 
    height: 100%; 
    background: url('http://images.kuoni.co.uk/73/johannesburg-and-pretoria-38330408-1438098667-WideInspirationalPhoto.jpg') center center no-repeat; 
    background-size: cover; 

    &:before { 
    content: ''; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background-image: linear-gradient(to left bottom,#002f4b,#dc4225); 
     opacity: .5; 
     height:100%; 
     width:50%; 
    } 
}