使用bg图像水平淡化div

Question

whitespace = bg image

http://i.stack.imgur.com/FbxQZ.png

CODE： HTML

<div class="container">
    <div id="content">
         <div id="item1"></div>
         <div id="item2"></div>
         <div id="item3"></div>
    </div>
</div>

CSS

body {background:url(image.jpg);}
.container {width:100%; height:50%; overflow-x:scroll;}
#item1, #item2, #item3 {height:100%; width:50%;}

我已搜索但所有答案都说使用透明到白色*渐变。我有一个bg图像（不是图片附加 - 抱歉），我想让它淡出。我在其他网站上看过这个，我假设JS？

Answer 1

canvasimagegradient可以帮到你。它允许您绘制线性或线性或径向透明渐变效果。

以下代码是制作线性渐变的代码示例：

ctx.drawImage(desertImage, 0, 0);

var linearGradient = ctx.createLinearGradient(0, 0, 0, googleImage.height);
linearGradient.addColorStop(0, "transparent");
linearGradient.addColorStop(1, "#000");

ctx.drawImageGradient(googleImage, 12, 65, linearGradient);

这会给你这样的东西：

请注意，您需要使用canvas