[CSS]不用圖檔將背景轉成PS風透明格仔

17/04/201617/04/2016 background

有兩個做法

做法一

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");

1	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");

做法二

    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;

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/

heika note

迷嬸日常記事本

做法一

做法二

參考

Related Post

Leave a Reply Cancel reply