如何制作背景渐变

我需要网站管理员帮助。下面是一些代码：如何制作背景渐变

<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

谢谢，但我需要仍然有形象。这意味着我想从右侧的图像渐变为白色。 –

如何制作背景渐变

回答

相关问题