使用CSS創建方格背景

爲什麼不能使用類似的方法創建方格背景？使用CSS創建方格背景

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;

這個想法是在條紋正方形的底部疊加交替的顏色。它不起作用，但它似乎應該。

來源

2014-12-03 qw3n

http://lea.verou.me/demos/css3-patterns.html – j08691 2014-12-03 18:02:07

經過大量的玩耍並嘗試以其他方式做到這一點，我實際上明白你想做什麼:-)。而你其實非常接近。你有一個單一的問題：你的梯度都有90deg，所以他們覆蓋對方。也不需要背景顏色，因爲後面的漸變沒有任何透明度，它涵蓋了一切。

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; 
 
}

另請參閱如何建立一個適當的棋盤這個偉大的職位：http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/

來源

2014-12-03 17:28:39

我看到文章LEA和是我想要得到的，但似乎應該有一個更簡單的方法。 – qw3n 2014-12-03 19:45:18

下面是對這個設計，但在偏另一個好辦法。

請注意背景大小對於保持此模式中的平滑過渡非常重要。

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; 
}

要更改背景的顏色，請在兩個重複的線性漸變中更改第二個十六進制顏色。

希望這可以幫助別人

來源

2017-11-01 13:29:12

這裏是一個什麼樣的格仔背景看起來在圖形設計編輯器，如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

來源

2017-11-01 18:01:42 LOTUSMS

使用CSS創建方格背景

回答

相關問題