原生js实现将任意图片转换成rgb形式的纯css代码

代码语言:html

所属分类:其他

代码描述:原生js实现将任意图片转换成rgb形式的纯css代码,任意图片转换成rgb多行代码。

代码标签: 图片 转换 rgb css 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vexel</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style></style>
    <style>
        html {
      height: 100%
    }
    
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: sans-serif;
    }
    
    header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 4.5em;
      background: -webkit-linear-gradient(#666, #333);
      background: -moz-linear-gradient(#666, #333);
      background: linear-gradient(#666, #333);
    }
    
    h1 {
      display: inline-block;
      color: #F1F1F1;
      text-shadow: 0 1px #FFF, 0 -1px #000;
      margin: 15px;
    }
    
    h3 {
      display: inline-block;
      color: #F3F3F3;
    }
    
    h1, h3 {
      font-weight: normal;
    }
    
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding-top: 4.5em;
    }
    
    #input {
      background-color: #fff;
      background-image: -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
      background-image: -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0