テクスチャにグラデーションを追加する助けが必要です

Question

下のリンクのテクスチャにセンタリングされたグラデーションを追加してみたいと思います。

http://lea.verou.me/css3patterns/#carbon-fibre

私はそれぞれの側は＃555454で起動する＃2a2b2cとセンターになりたいです。

私のCSSは少し弱いですが、誰かが私を助けて、これらの方法の仕組みを知ることができますか？

おかげ

Answer 1

.myDiv { 
 
\t margin: 0; 
 
\t height: 500px; 
 
\t width: 500px; 
 
\t background: 
 
\t radial-gradient(black 15%, transparent 16%) 0 0, 
 
\t radial-gradient(black 15%, transparent 16%) 8px 8px, 
 
\t radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, 
 
\t radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; 
 
\t background-color:#282828; 
 
\t background-size:16px 16px; 
 
\t position: relative; 
 
} 
 

 
.myDiv:after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t background: red; /* For browsers that do not support gradients */ 
 
\t background: -webkit-radial-gradient(#2a2b2c , #555454); /* Safari 5.1 to 6.0 */ 
 
\t background: -o-radial-gradient(#2a2b2c , #555454); /* For Opera 11.6 to 12.0 */ 
 
\t background: -moz-radial-gradient(#2a2b2c , #555454); /* For Firefox 3.6 to 15 */ 
 
\t background: radial-gradient(#2a2b2c , #555454); /* Standard syntax */ 
 
\t height: 500px; 
 
\t width: 500px; 
 
\t opacity: 0.7 
 
}

<div class="myDiv"></div>

Answer 2

試してみてくださいこの：

background: rgba(42,43,44,1); 
background: -moz-linear-gradient(left, rgba(42,43,44,1) 0%, rgba(85,84,84,1) 50%, rgba(42,43,44,1) 100%); 
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(42,43,44,1)), color-stop(50%, rgba(85,84,84,1)), color-stop(100%, rgba(42,43,44,1))); 
background: -webkit-linear-gradient(left, rgba(42,43,44,1) 0%, rgba(85,84,84,1) 50%, rgba(42,43,44,1) 100%); 
background: -o-linear-gradient(left, rgba(42,43,44,1) 0%, rgba(85,84,84,1) 50%, rgba(42,43,44,1) 100%); 
background: -ms-linear-gradient(left, rgba(42,43,44,1) 0%, rgba(85,84,84,1) 50%, rgba(42,43,44,1) 100%); 
background: linear-gradient(to right, rgba(42,43,44,1) 0%, rgba(85,84,84,1) 50%, rgba(42,43,44,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2b2c', endColorstr='#2a2b2c', GradientType=1); 

使用このサイトhttp://www.cssmatic.com/gradient-generator

と、このアニメーションのためのgradinet：https://www.gradient-animator.com/