2017-08-28 45 views
-2

enter image description here如何在css中製作顏色模式?

爲了達到這個設計,我創建了一定大小的div。 在上面的圖像背景顏色的紅色和綠色作爲煙霧在它的頂部有一些模式。 如何創建這種模式? 在CSS中實現這個有什麼不同的方法?

<div id="canvas" style="background-color:red;"> 

</div> 

這就是我所能做的。我在photoshop上創建了一個類似的顏色模式(綠色模式)。放在這個div然後試圖改變該模式的顏色。但它沒有反映任何變化。

+0

https://css-tricks.com在您的項目中使用它/ stripes-css/ – 2017-08-28 10:32:38

+1

如果您將Photoshop文件保存爲透明背景,則可以在CSS中使用多個背景。 https://www.w3schools.com/css/css3_backgrounds.asp – Gerard

+0

你需要不僅僅是一個'div'。研究'帆布'如何工作並付出努力,所以我們知道你知道一些事情,否則這將是毫無意義的 – LGSon

回答

1

這種彩色圖案,你可以在SVG(插圖)製成,那麼你可以這樣

<div class="mySvg"> 
    <svg> 
    <use x="0" y="0" xlink:href="#color"></use> 
    </svg> 
</div> 

Details

+0

這個問題問如何在CSS中做到這一點。 – Rob

+1

這個答案的作者比OP知道得更多。錯誤(如果有的話)不是解釋如何在SVG中實現所需效果的答案, - 錯誤在於如何在CSS中實現它。 – Rounin

+0

@Momin SVG也能工作,但我想根據輸入的顏色動態生成這些。 –