如何製作背景漸變

我需要網站管理員幫助。下面是一些代碼：如何製作背景漸變

<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; 
}

的問題是，我需要做一個梯度在它的右邊緣。我無法將漸變添加到圖像，因爲.left元素會在較小的顯示器上更改大小，並且漸變不會顯示出來。在這裏你可以看到完整的網站（這是波蘭語，但你不需要了解它）Click here看到它。謝謝。
Adam

來源

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

謝謝，但我需要仍然有圖像。這意味着我想從右側的圖像漸變爲白色。 –

亞當，嘗試一下，這正是你現在想要的......我將它改爲在線圖片，你可以將它改回你的圖片 – 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

謝謝，但我需要仍然有形象。這意味着我想從右側的圖像漸變爲白色。 –

如何製作背景漸變

回答

相關問題