关于图片背景的处理

mengkun 7.4K 7

在开发 MKOnlinePlayer 2.0 时，纠结了很久的一个问题就是封面背景的处理。

问题起源

为了使整体效果更佳震撼，我们需要将歌曲的封面拉伸铺满整个网页作为播放器的背景。然而这样做就有几个不得不解决的问题，一是每首歌的封面主色调都完全不一样，导致界面的字体颜色不好搭配。如果弄个白色字体刚好又遇到了个白色调的背景，那么就会导致播放器上面的文字完全看不清。二是有一些歌曲的封面非常凌乱，直接用作背景会显得花里胡哨。

解决方案

第一个问题当前的解决方案是在背景上加上一个黑色的半透明遮罩，这样的话就算是纯白的背景，也会变得稍微暗一点，使界面文字能看清。
关于图片背景的处理

第二个问题是最棘手的：

关于图片背景的处理

比如说陈奕迅的《我的最好时代》这个专辑封面，放大并平铺后的效果简直不能直视……

关于图片背景的处理

我的解决方案是从封面的左上角区域中截取一个 10*10px 的一小块并拉伸铺满整个背景，因为是从一小块中拉伸的，因此整个背景图像显得会比较平滑。

  1. // 背景更换特效  
  2. function blurCover() {  
  3.     var bCanvas = $("#blur-canvas")[0].getContext("2d");  
  4.     bCanvas.drawImage($("#music-cover")[0], 10, 10, 20, 20, 0, 0, $("body").width(), $("body").height());  
  5.     $("#blur-canvas").fadeIn(1000);  
  6.     $("#blur").animate({opacity:"0.3"}, 1500); // 背景更换特效  
  7. }  

然而……这样的做法又产生了一个显而易见的缺点：背景中产生了大块的“马赛克”。
关于图片背景的处理

不过整体来看效果还是挺不错的，最终 2.0 版中的背景切换就是基于以上原理实现的。

再度探讨

因为还是有些不完美，在 2.0 版发布后，我一直在找一个更好的解决办法。

首先研究的就是 QQ音乐网页版 的实现方法。MKOnlinePlayer 2.0 的整体界面布局就是模仿的 QQ 音乐网页版的，而 QQ 音乐网页版的封面背景处理得非常好，在极大地保留了封面细节的同时也使整个界面显示显得不凌乱。
关于图片背景的处理

通过对其代码的分析，我发现它的实现方法如下：

  1. <div class="bg-mask"></div>  
  2.   
  3. <div class="bg-img"></div>  
  4.   
  5. <style>  
  6. body {  
  7.     /* 此处的颜色是图片的主体颜色 */  
  8.     background-color: #eee;  
  9. }  
  10. .bg-img, .bg-mask, body, html {  
  11.     width: 100%;  
  12.     height: 100%;  
  13.     overflow: hidden;  
  14. }  
  15. .bg-img {  
  16.     display: block;  
  17.     background-repeat: no-repeat; /* 不重复 */  
  18.     background-size: cover;       /* 覆盖 */  
  19.     background-position: 50%;     /* 居中 */  
  20.     -webkit-filter: blur(90px);   /* 聚焦 */  
  21.     filter: blur(90px);  
  22.     opacity: .6;    /* 半透明 */  
  23.     background-image: url(封面图片);  
  24. }  
  25. .bg-img, .bg-mask {  
  26.     position: absolute;  
  27.     top: 0;  
  28.     left: 0;  
  29. }  
  30.   
  31. .bg-mask {  
  32.     background-color: #292a2b;  
  33.     background-color: rgba(0,0,0,.35);  
  34.     z-index: 2;  
  35. }  
  36. </style>  

你可以 戳我 查看demo

要采用这种方法，又多了个难点：要获取图片的主体颜色才行（这就意味着要解决图片跨域问题）。而且它的浏览器兼容性也不好，在 IE 里完全没效果。遂又放弃了这种方案。

山穷水复

在放弃了 QQ音乐 的那种方案后，我又想到了在 1.0 版本中采用的方案：将图片整体模糊化后再用作背景。

相关代码如下：

  1. <div class="bg-mask"></div>  
  2.   
  3. <div class="bg-img"></div>  
  4.   
  5. <style>  
  6. body {  
  7.     /*此处背景色应该是从图片中提取主色调效果更佳 */  
  8.     background-color: #eee;  
  9. }  
  10. .bg-img, .bg-mask, body, html {  
  11.     width: 100%;  
  12.     height: 100%;  
  13.     overflow: hidden;  
  14. }  
  15. .bg-img {  
  16.     display: block;  
  17.     background-repeat: no-repeat; /* 不重复 */  
  18.     background-size: cover;       /* 覆盖 */  
  19.     background-position: 50%;     /* 居中 */  
  20.       
  21.     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */  
  22.       
  23.     -webkit-filter: blur(80px); /* Chrome, Opera */  
  24.        -moz-filter: blur(80px);  
  25.         -ms-filter: blur(80px);      
  26.             filter: blur(80px);  
  27.       
  28.     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=80, MakeShadow=false); /* IE6~IE9 */  
  29.       
  30.     background-image: url(http://p3.music.126.net/GEggKzM4LXpeMqD1fEGeuA==/804842511532362.jpg);  
  31. }  
  32. .bg-img, .bg-mask {  
  33.     position: absolute;  
  34.     top: 0;  
  35.     left: 0;  
  36. }  
  37.   
  38. .bg-mask {  
  39.     background-color: #292a2b;  
  40.     background-color: rgba(0,0,0,.35);  
  41.     z-index: 2;  
  42. }  
  43. </style>  

你可以 戳我 查看demo

这种方法比 QQ音乐网页版 的效果还要好，而且不需要知道图片的主色调！然而……在 IE 里的表现还是很糟糕……

柳暗花明

今天在百度相关方案时，无意间找到了一个 js 插件： background-blur.js ，卧槽！这就是我要的“滑板鞋”！

关于图片背景的处理

测试了一下无论是浏览器兼容性还是效果都非常棒！下一个版本就用它了！

关于这个插件的更多说明，可以阅读 http://www.htmleaf.com/jQuery/Image-Effects/201507042161.html

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 热心网友
    热心网友 Lv 1

    现在音乐播放器好像抓取不到榜单了

    #7 2021-09-09 10:22 回复
  2. 匿名
    匿名 Lv 1

    我想问一下你的2.2的后台删除了么

    #6 2017-05-21 16:31 回复
  3. 匿名
    匿名 Lv 1

    你的音乐网站源码不错的 我也搭建了一个 不过首页的版权信息我更改了的.

    #5 2017-05-21 16:30 回复
  4. 呆毛电脑配置网
    呆毛电脑配置网 Lv 1

    [晕] GIF 鼠标动了。我还以为我的呢。

    #4 2017-03-30 15:23 回复
  5. 星空游戏
    星空游戏 Lv 2

    感谢博主分享

    地板 2017-03-27 18:26 回复
  6. 匿名雷锋
    匿名雷锋 Lv 1

    辛苦了 这个网页播放器确实不错

    板凳 2017-03-26 13:48 回复
  7. 29900域名交易网
    29900域名交易网 Lv 1

    辛苦了 这个网页播放器很不错

    沙发 2017-03-26 13:40 回复
分享