バックグラウンドグラデーションを作成するには

私はウェブページで助けが必要です。私はウェブマスターしています。ここではいくつかのコードがあります：バックグラウンドグラデーションを作成するには

<body> 
<div class="left"> 
</div>

そして、ここではそれのためのCSSです：

.left { 
    position: fixed; 
    width:50%; 
    height: 100vh; 
    top:0; 
    background-image: url('../img/plakatm.jpg'); 
    background-size: 1164px,1000px; 
    background-position: center; 
    background-repeat: no-repeat; 
}

問題は、私はそれの右端に勾配を作るために必要があること、です。画像にグラデーションを追加することはできません。小さい要素のサイズを変更すると、グラデーションは表示されません。ここでは完全なサイトを見ることができます（それは磨かれていますが、理解する必要はありません）Click hereおかげさまで
アダム

出典

2017-05-31 Adam Sołtan

使用CSS linear-gradient、以下のようなものが良く、あなたのために働くに別々にそれを分離します別のクラス、.leftそれを呼び出すことはありませ、私はこの例では.gradientそれを呼び出す：

.left { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100vh; 
 
    top: 0; 
 
    background-image: url('http://weknownyourdreamz.com/images/jungle/jungle-04.jpg'); 
 
    background-size: 1164px, 1000px; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.left:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    background: white; 
 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); 
 
    background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); 
 
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); 
 
}

<body> 
 
    <div class="left"> 
 
    </div> 
 
</body>

出典

2017-05-31 13:21:34 Alireza

ありがとうございますが、まだ画像が必要です。つまり、画像から右側の白へのグラデーションを作りたいということです。 –

Adam、これを試してみてください。これは今あなたが欲しいものです...私はオンライン画像に変更します。画像に戻すことができます – Alireza

ありがとうございます。 –

グラデーションのCSSプロパティがあります。 Thatが役立ちます。

出典

2017-05-31 13:17:39 StuntHacks

ありがとうございます。私はまだ画像が必要です。つまり、画像から右側の白へのグラデーションを作りたいということです。 –

バックグラウンドグラデーションを作成する方法は次のとおりです。

.left { 
 
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="left"> 
 
</div>

そして、これはあなたが良いグラデーションを見つけることができるリンクです：https://webgradients.com/

出典

2017-05-31 13:20:10

ありがとうございますが、まだ画像が必要です。つまり、画像から右側の白へのグラデーションを作りたいということです。 –

バックグラウンドグラデーションを作成するには

答えて

関連する問題