Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
图案生成器
生成可重复的背景图案,支持多种样式和自定义参数
图案类型
基础设置
颜色设置
图案详情
预设图案
预览
图案预览
这是一个展示背景图案效果的示例
小尺寸
大尺寸
图案参数
类型:圆点
大小:40px
间距:10px
旋转:0°
CSS代码
.pattern-background {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%26lt%3Bsvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%26gt%3B%26lt%3Bcircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%233b82f6%22%20transform%3D%22rotate(0%2020%2020)%22%20%2F%26gt%3B%26lt%3B%2Fsvg%26gt%3B");
background-repeat: repeat;
background-size: 50px 50px;
}
/* 简化版本 */
.pattern-simple {
background: #ffffff url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='5' fill='#3b82f6' transform='rotate(0 20 20)'/%3E%3C/svg%3E") repeat;
}SVG代码
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="5" fill="#3b82f6" transform="rotate(0 20 20)" /></svg>