有兩個做法
做法一
1 |
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); |
做法二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
background-image: -moz-linear-gradient(45deg, #cdcdcd 25%, transparent 25%), -moz-linear-gradient(-45deg, #cdcdcd 25%, transparent 25%), -moz-linear-gradient(45deg, transparent 75%, #cdcdcd 75%), -moz-linear-gradient(-45deg, transparent 75%, #cdcdcd 75%); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #cdcdcd), color-stop(.25, transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #cdcdcd), color-stop(.25, transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #cdcdcd)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #cdcdcd)); -moz-background-size: 30px 30px; background-size: 30px 30px; -webkit-background-size: 30px 31px; /* override value for shitty webkit */ background-position:0 0, 15px 0, 15px -15px, 0px 15px; background-color: #ffffff; |
參考
cropper
https://github.com/fengyuanchen/cropper
Checkerboard pattern with CSS3
http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/