javascript - 使用 bg 图像水平淡化 div

Question

空白=背景图片

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

代码: 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