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 b.........完整代码请登录后点击上方下载按钮下载查看