我是一个为智能手机设计网站的初学者程序员,我有一个身体的背景图像,我希望颜色平衡缓慢变化,交替显示颜色,就像有人在任一方向上对Photoshop颜色平衡控制条进行一定程度的调整一样。 当您查看页面时,这种情况一直在发生,但是速度足够慢,以免分散您的注意力。 本质上是变色的背景图像。

是否有可能在智能手机上实现这种效果?如何实现? 谢谢!

这是bg图片的链接:
http://i.imgur.com/T1FMp5L.jpg

我正在考虑的可能解决方案(请记住我是新手):创建处于不同平衡状态的多个图像,并使用缓慢的过渡从一个平滑过渡到另一个,或创建一个循环的动画图像文件并将其用作背景图片。 这些东西都可以在我的应用程序中工作吗?

===============>>#1 票数:0

我发现可以使用Canvas完成此操作。 我发现了这一点: 画布-使用HTML5 / CSS / JS更改图像的颜色?

第一条评论对其进行了详细描述,并提供了以下jsfiddle示例: http : //jsfiddle.net/pHwmL/1/

function tintImage(imgElement,tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var map = ctx.getImageData(0,0,320,240);
    var imdata = map.data;

    // convert image to grayscale
    var r,g,b,avg;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];
        // alpha channel (p+3) is ignored           

        avg = Math.floor((r+g+b)/3);

        imdata[p] = imdata[p+1] = imdata[p+2] = avg;
    }

    ctx.putImageData(map,0,0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle=tintColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // replace image source with canvas data

这将适用于支持HTML5的智能手机/浏览器。

  ask by mholberger translate from so

未解决问题?本站智能推荐:

1回复

用于多次滚动更改背景图像以创建动画的代码

我在查看此站点时 ,发现背景图像在用户滚动时似乎是如何移动和动画的。 通过检查源代码,它表明这是通过在用户滚动时更改背景图像来实现的。 从本质上讲,它会跳过许多帧图像,给人以动画的错觉。 最快,最简单的方法是什么? 我正在使用ScrollMagic库,如果这样做会更容易。
1回复

使用Javascript使背景淡入

您好,下面是我的JS代码,用于每30秒更改一次背景图片。 我也从研究中得到了这个示例代码,请有人告诉我如何将示例代码集成到我的JS中,所以变化的图像逐渐淡出,因为我根本不知道从哪里开始并且完全迷失了方向。 我的JS 我要集成的示例JS 还有没有一种方法可以在不使用CSS的
1回复

mobile.css中的背景图像更改

好的,我目前正在指导我的样式表,如下所示: 在Site.css上,我具有带有背景图像的特定ID: 我以为我可以在mobile.css上简单地将其更改为“ none”或其他图像,这有点类似于此(我已经尝试了几种变体): 但是,它似乎不起作用。 背景仍然显示在网站的移动版本
1回复

jQuery的动画图像反转

我正在尝试制作图像颜色反转的动画。 我可以这样反转图像: 这是我的动画代码,在控制台中没有出现任何错误,但没有设置动画: 知道为什么会这样吗?
1回复

在Windows Phone 7移动网站上流畅滚动

我正在为Windows Phone 7.5设备创建一个移动Web应用程序,并且希望一个带有overflow:scroll的框平稳滚动(在用手指滚动时释放内容时不停止)。 现在,对于iOS,它存在: -webkit-overflow-scrolling:touch; WP7是否有类似的
1回复

在移动网站上背景颜色/背景图像的底部被切除

我已经回答了类似问题的答案,但没有一个答案对这个问题有所帮助。 我的背景图像在视口的底部被切除。 如果我删除背景图像并使用纯色作为背景,则会发生相同的情况。 可以看到移动页面上的文本,背景被截断。 使用Chrome的设备模式复制iPhone 6来查看网站。 在这个问题上的任何帮助将
1回复

如何在iOS的移动网站上添加“分享whatsapp”按钮

对于iOS8,在网站上添加whatsapp共享按钮。 我使用以下内容: 它适用于Android,但不适用于iOS
1回复

如何在我的移动网站上添加“添加收藏夹”链接?

我正在构建一个移动网站,客户端希望用户能够单击该网站上的链接,从而将该网站的链接添加到用户手机上的主屏幕。 这可能吗?
1回复

在移动网站上具有地理位置和路线信息功能的Google地图

在适用于iPhone和Android的移动网站上添加带有地理位置和路线信息功能的google地图的好方法是什么? 我想当用户打开网页时,他会收到允许使用他的位置的权限消息,而当他允许地图时,它将加载带有用户位置的页面。 这是过程的说明https://cacoo.com/diagram
2回复

IE11中的动画背景图像

我正在尝试为按钮应用css3动画: 此代码在IE11以外的所有相关浏览器中均能正常运行。 IE11仅显示第一张图像(定义为通用样式),并且当我尝试通过动画更改它时,对动画没有任何作用。 有解决问题的想法吗? 具有变化的背景位置的PS单个图像不是很好的解决方案,因为它看起来不适合