如何在css中制作颜色模式？ [英] How to make color patterns in css?

问题描述

为了达到这个设计，我创建了一个特定大小的div。
在上图中，div的背景颜色是红色，绿色是以某种图案作为烟雾的顶部。
如何创建这种模式？
在CSS中实现这一点的不同方法是什么？

 < div id =canvasstyle =background - 颜色：红;> 
 
< / div> 
  

这就是我所能做的。我在photoshop上创建了一个类似的颜色模式（绿色模式）。放在这个div然后试图改变该模式的颜色。但它没有反映出任何变化。

解决方案

这种颜色模式可以在 SVG Illustrator），然后你就可以像这样在你的项目中使用它。

 < div class =mySvg> 
< svg> 
< use x =0y =0xlink：href =＃color>< / use> 
< / svg> 
< / div> 
  

详情

To achieve this design I created a div of certain size. In above image background color of the div is red and green is used as smoke on top of it in some pattern. How can I create such patterns ? What are different ways to achieve this in CSS ?

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

</div>

This is all I could do. I created a similar color pattern (the pattern of green) on photoshop. Placed it on this div then tried to change the color of that pattern. But it didnot reflect any changes.

解决方案

This kind of color pattern you can made in SVG ( Illustrator ) and then you can use it at your project like this

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

Details

这篇关于如何在css中制作颜色模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！