Question

为什么你不能用这样的东西创建格仔背景？

background-color:#ccc;
background-image:linear-gradient(90deg, transparent 50%, #aaa 50%),
                 linear-gradient(90deg, #aaa 50%, #ccc 50%);
background-size:50px 50px,50px 50px;
background-position:0 0, 0 25px;

这个想法是在条纹方块的底部层叠交替的颜色。它不起作用但看起来应该如此。

Answer 1

经过大量的游戏，并尝试以其他方式做到这一点，我实际上明白你想做什么:-)。而你实际上非常接近。你有一个问题：你的渐变都有90deg，所以它们互相覆盖。此外，不需要背景颜色，因为背面的渐变没有任何透明度，它涵盖了所有内容。

＆＃13;

html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-image:linear-gradient(0deg, transparent 50%, #aaa 50%),
                 linear-gradient(90deg, #aaa 50%, #ccc 50%);
background-size:50px 50px,50px 50px;
background-position:0 0, 0 25px;
}

＆＃13;

另请参阅这篇关于如何创建正确的棋盘的精彩文章：http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/

Answer 2

这是格仔背景在Photoshop或Illustrator等图形设计编辑器中的外观的精确复制品。（所有CSS）

.checkered{
    height: 240px;
    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background-repeat: repeat, repeat;
    background-position: 0px 0, 5px 5px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-background-origin: padding-box, padding-box;
    background-origin: padding-box, padding-box;
    -webkit-background-clip: border-box, border-box;
    background-clip: border-box, border-box;
    -webkit-background-size: 10px 10px, 10px 10px;
    background-size: 10px 10px, 10px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
}

您可以在我的笔here

中看到一个有效的例子

Answer 3

此实现在Chrome，Firefox和Safari上产生方格背景：

body {
    background-image:
      linear-gradient(45deg, #000 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #000 75%),
      linear-gradient(45deg, transparent 75%, #000 75%),
      linear-gradient(45deg, #000 25%, #fff 25%);    

    background-size:100px 100px;       

    background-position:0 0, 0 0, -50px -50px, 50px 50px;
}

此样式定义了一个四部分的背景图像。每个线性渐变定义一个黑色三角形。三角形被移动以使其对齐以形成正方形（每个三角形两个）。最后一个线性渐变定义了其他两个正方形（负空间）的颜色。第三个三角形和第四个三角形的位置使其起作用。（否则，它们将位于其他两种类似样式的顶部。）请参见提供的小提琴中的结果（为了更好地理解，将＃000替换为四种不同的颜色，并将#fff更改为透明）：

http://jsfiddle.net/1o0f34hp

应用于div： http://jsfiddle.net/1o0f34hp/1

但是，在Firefox中，三角形之间的边缘似乎确实有些撕裂。这里引用了此工件：

background image, linear gradient jagged edged result needs to be smooth edged

我也将其实现为React样式化组件，如下所示：

let dark = '#777';
let light = '#ccc';

export const Checkerboard = styled.div`
  background-image: linear-gradient(45deg, ${dark} 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, ${dark} 75%),
    linear-gradient(45deg, transparent 75%, ${dark} 75%),
    linear-gradient(45deg, ${dark} 25%, ${light} 25%);

  background-size: ${props => `${props.size} ${props.size}`};

  background-position: 0 0, 0 0,
    ${props =>
      `calc(${props.size} / -2) calc(${props.size} / -2), calc(${
        props.size
      } / 2) calc(${props.size} / 2)`};
`;

Answer 4

这是对此设计的另一个调整，但是偏见。

请注意，背景大小对于在此模式中保持平滑过渡非常重要。

html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background:repeating-linear-gradient(135deg, rgba(0,64,101,0.7) 40%, #004065 60%),
       repeating-linear-gradient(45deg, rgba(0,80,126,0.7) 40%, #004065 60%);
    background-size:12px 18px;
    background-position: 0 0;
}

要更改背景的颜色，请在两个重复的线性渐变中更改第二个十六进制颜色。

希望这有助于某人

Answer 5

我制作了这个简化版。在 CSS 的根属性中设置颜色和大小。

:root {
    --checker-color-1: #abcedf;
    --checker-color-2: #123456;
    --checker-size: 20px;
    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
}

body {
    background-color: var(--checker-color-2);
    background-image: var(--checker-gradient), var(--checker-gradient);
    background-position: 0 0, var(--checker-size) var(--checker-size);
    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}

<!DOCTYPE html>
<html>
<head>
    <title>CSS Checkered Background</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

更新：

此代码段源自 CSS Checkered Background，其中显示了更多选项。

但此后我也学习了一种实现相同效果的新方法，但它使用 SVG（以及 JavaScript 来创建 SVG）SVG Checkered Background。不过，每种方法都有自己的注意事项。

Answer 6

我使用 ImageMagick 在终端中制作了一个基于 10x10 方块的棋盘格图案，如下所示：

magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( xc:"gray(102)" xc:"gray(154)" +append \) -append -strip checkerboard.png

看起来像这样：

现在，如果我想要 base64 表示，我可以这样做：

magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( xc:"gray(102)" xc:"gray(154)" +append \) -append -strip png:- | base64

这就给出了：

iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==

然后我可以将其用于重复背景，如下所示：

<div style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==)">'

如果我在该背景上放置一个具有渐变透明度的红色 <img>，我会得到：

Answer 7

虽然先前的回答表明有可能，但在大多数情况下，使用实际的背景图像可能会更好。

10x10 PNG检查器图像大约80个字节。这是108个字节的base64编码，而完整的CSS规则是148个字节-少于最短的纯CSS解决方案。
2x2 PNG图像的尺寸并不小，但是需要额外的CSS来缩放和渲染。

使用CSS创建方格背景

7 个答案: