Bối cảnh pixelated

Question

Tôi đang tìm một hiệu ứng nền như thế này (trong CSS tinh khiết), làm thế nào tôi có thể làm điều này?

(hình ảnh thu nhỏ)

Code:

html, 
 
body { 
 
    height:100%; 
 
    background-color:#3D3D3D; 
 
    display:flex; 
 
} 
 

 
div { 
 
    height: 100px; 
 
    width:100px; 
 
    margin:10px auto; 
 
    background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686); 
 
    background-position: 0 0, 51px 51px; 
 
    background-color: #222222; 
 
    background-size: 2px 2px; 
 
}

<div></div>

Answer 1

Đây là giải pháp CSS tinh khiết tạo 4 linear-gradients như thế này với repeat-x và vị trí thích hợp.

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 25px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 50px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 75px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 100px repeat-x; 
 
}

Sau đó lặp lại linear-gradient rất nhiều lần. Demo:

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 25px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 50px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 75px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 100px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 125px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 150px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 175px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 200px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 225px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 250px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 275px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 300px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 325px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 350px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 375px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 400px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 425px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 450px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 475px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 500px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 525px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 550px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 575px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 600px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 625px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 650px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 675px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 700px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 725px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 750px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 775px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 800px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 825px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 850px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 875px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 900px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 925px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 950px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 975px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1000px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1025px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1050px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1075px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1100px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1125px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1150px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1175px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1200px repeat-x, 
 
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0/50px 1225px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0/50px 1250px repeat-x, 
 
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0/50px 1275px repeat-x, 
 
    linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0/50px 1300px repeat-x; 
 
    /* and so on */ 
 
}

Tất nhiên bạn có thể sử dụng bất kỳ ngôn ngữ lập trình hoặc một số tiền xử lý CSS để tạo ra con quái vật này thuộc tính CSS.

Nhưng thành thật mà nói tôi sẽ sử dụng SVG cho điều này với 8 ô vuông.Demo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"> 
 
    <rect x="0" y="0" width="10" height="10" fill="#868686"/> 
 
    <rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="10" y="10" width="10" height="10" fill="#222"/> 
 
    <rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/> 
 
    <rect x="10" y="20" width="10" height="10" fill="#868686"/> 
 
    <rect x="0" y="30" width="10" height="10" fill="#222"/> 
 
    <rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/> 
 
</svg>

Demo với SVG (chỉ hoạt động trong Chrome, bạn sẽ cần phải sử dụng SVG bên ngoài (cách ưa thích) hoặc thoát ngữ đánh dấu SVG):

body { 
 
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect x="0" y="0" width="10" height="10" fill="#868686"/><rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/><rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="10" width="10" height="10" fill="#222"/><rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="20" width="10" height="10" fill="#868686"/><rect x="0" y="30" width="10" height="10" fill="#222"/><rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/></svg>') 0 0/40px 80px repeat; 
 
}

Bản trình diễn có SVG nội tuyến thoát, hoạt động ở mọi nơi, nhưng ít bảo trì hơn:

body { 
 
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0/40px 80px repeat; 
 
}

Answer 2

Tùy chọn 1: Dễ dàng hơn, linh hoạt và hiệu quả hơn khi sử dụng base64 mà bạn có thể dễ dàng tạo ra với http://www.patternify.com (hoặc một cái gì đó tương tự). Một base64 sẽ được tạo mà bạn có thể triển khai dưới dạng một URL background-image với một số repeat.

Tùy chọn 2: Giải pháp chỉ CSS từ CSS3 Pie. Thích ứng với màu sắc của bạn khi cần.

body { 
 
    margin: 0; 
 
} 
 
div { 
 
    padding: 100vh 100vw 0 0; 
 
    background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, 
 
       -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, 
 
       -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, 
 
       -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, 
 
       -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), 
 
       -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, 
 
       -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, 
 
       -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, 
 
       -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, 
 
       -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), 
 
       -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, 
 
       linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, 
 
       linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, 
 
       linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, 
 
       linear-gradient(90deg, #1b1b1b 10px, transparent 10px), 
 
       linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 
 
    background-size: 20px 20px; 
 
    background-color: #131313; 
 
    -pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px/20px, 
 
        linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px/20px, 
 
        linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px/20px, 
 
        linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px/20px, 
 
        linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0/20px, 
 
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) 
 
        0 0/20px #131313; 
 
}

<div></div>

Nguồn: http://css3pie.com/demos/gradient-patterns/

Answer 3

Không chính xác nền cần thiết nhưng tôi đoán nó là đơn giản và dễ sử dụng.

div{ 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: -webkit-repeating-linear-gradient(180deg, transparent, #868686 10%, #fff 10%); 
 
    background-color: #222222; 
 
} 
 

 
div.last{ 
 
    background: -webkit-repeating-linear-gradient(transparent, #868686 10%, #fff 10%); 
 
}

<div></div> 
 
<div class="last"></div>