html+CSS 20种钻石纹理背景，你应该是没见过的。值得收藏

有的时候简单的广告条，或部分区块，不想弄背景图，只好用css来实现。

但大多数人应该都会认为css实现的背景也就是各种渐变了。

那么看看下面的样式，怎么样？

这有个别的效果是动画效果，颜色不停的变幻。所以这截图显示不出来。

效果动心了么。

部分代码：

/* 广告条背景样式定义 */ /* 1. 钻石纹理背景 */ .diamond-texture { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.15) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 3px, transparent 3px); background-size: 40px 40px, 30px 30px, 50px 50px; } /* 2. 四色渐变 */ .four-color-gradient { background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb); background-size: 400% 400%; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 3. 几何钻石 */ .geometric-diamond { background-color: #0f3460; background-image: linear-gradient(30deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(150deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(30deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(150deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(60deg, rgba(233, 69, 96, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(233, 69, 96, 0.5) 75%, rgba(233, 69, 96, 0.5)), linear-gradient(60deg, rgba(233, 69, 96, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(233, 69, 96, 0.5) 75%, rgba(233, 69, 96, 0.5)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; } /* 4. 蓝紫钻石渐变 */ .blue-purple-diamond { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; } .blue-purple-diamond::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%), linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); background-size: 60px 60px; transform: rotate(30deg); } /* 5. 霓虹钻石 */ .neon-diamond { background: linear-gradient(45deg, #ff00cc, #333399); background-image: linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.2) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(255, 255, 255, 0.2) 50%, transparent 51%); background-size: 40px 40px; } /* 6. 宝石切割效果 */ .gem-cut { background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59); position: relative; overflow: hidden; } .gem-cut::after { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%), linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%); background-size: 80px 80px; transform: rotate(20deg); }

完整版下载吧：https://wangpanmao.com/archives/7441/https://wangpanmao.com/archives/7441/