css实现8种图案背景效果代码-html代码-BFW代码库

css实现8种图案背景效果代码

代码语言：html

所属分类：背景

代码描述：css实现8种图案背景效果代码，点击下拉框进行切换。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body{margin:0;padding:0}div{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}#patternizer{width: 200px;height:40px;padding:8px;outline:none;border:4px solid #131417;border-radius:12px;font-weight:500}
.tartan {
  background-color: #d9cfc3;
  background-image: 
    linear-gradient(90deg, transparent 95%, #2b2b2b 95%, #2b2b2b 98%, transparent 98%),
    linear-gradient(0deg, transparent 95%, #2b2b2b 95%, #2b2b2b 98%, transparent 98%),
    linear-gradient(90deg, transparent 80%, #2b2b2b 80%, #2b2b2b 85%, transparent 85%),
    linear-gradient(0deg, transparent 80%, #2b2b2b 80%, #2b2b2b 85%, transparent 85%),
    linear-gradient(90deg, transparent 40%, #a83d3b 40%, #a83d3b 50%, transparent 50%),
    linear-gradient(0deg, transparent 40%, #a83d3b 40%, #a83d3b 50%, transparent 50%);
  background-size: 100px 100px;
}
.argyle {
   background-color: #DEB887; /* tan base */
    background-image:
        linear-gradient(-116deg, transparent 40%, #8B4513 0, #8B4513 42%, transparent 42%),
        linear-gradient(116deg, transparent 41%, #8B4513 0, #8B4513 43%, transparent 43%),
        linear-gradient(-116deg, transparent 40%, #CD853F 0, #CD853F 42%, transparent 42%),
        linear-gradient(116deg, transparent 41%, #CD853F 41%, #CD853F 43%, transparent 43%),
        linear-gradient(-115deg, #CD853F 16.5%, transparent 0),
        linear-gradient(-65deg, #CD853F 16.5%, transparent 0),
        linear-gradient(115deg, #CD853F 16.5%, transparent 0),
        linear-gradient(65deg, #CD853F 16.5%, transparent 0),
        linear-gradient(-115deg, #8B4513 16.5%, transparent 0),
        linear-gradient(-65deg, #8B4513 16.5%, transparent 0),
        linear-gradient(115deg, #8B4513 16.5%, transparent 0),
        linear-gradient(65deg, #8B4513 16.5%, transparent 0);
    background-size: 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em;
    background-position: 3em -8em, -3em -8em, -9em 8em, 9em 8em, 0, 0, 0, 0, 4em, 4em, 4em, 4em;
}
.houndstooth {
  background:
    conic-gradient(#867139 25%, #0000 0 50%, #040200 0 75%, #0000 0),
    linear-gradient(135deg,
      #867139 0 12.5%, #040200 0 25%,
      #867139 0 37.5%, #040200 0 62.5%,
      #867139 0 75%, #040200 0 87.5%,
      #867139 0);
  background-size: 2rem 2rem;
}
.herringbone {
  background:
    linear-gradient(-45deg, #0000 1.3%, #e8e5df 0 32%,#0000 0),
    linear-gradient( 45deg, #0000  48%, #b19272 0 52%,#0000 0),
    linear-gradient( 45deg, #0000 1.3%, #e8e5df 0 32%,#0000 0) 0.5rem 0.5rem,
    linear-gradient(-45deg, #0000  48%, #b19272 0 52%,#0000 0) #e8e5df;
  background-size: 2rem 1rem, 1rem 1rem;
}
.wickerweave {
   background:
     conic-gradient(at 14px calc(100% - 14px),#0000 270deg,#a77857 0) 28px 0,
     linear-gradient(#4d4439 14px,#0000 0) 0 10px,
     conic-gradient(at 14px calc(100% - 14px),#0000 90deg,#4d4439 0 180deg, #a77857 0),
     #cbb990;
   background-size: 48px 48px;
}
.meandros {.........完整代码请登录后点击上方下载按钮下载查看