我需要一些帮助来为纹理添加渐变

Question

我想尝试在下面的 link 中为纹理添加居中渐变。

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

我希望每一边都是#2a2b2c，中间从#555454 开始。

我的 CSS 有点弱，谁能帮帮我，或者指出我在哪里可以学习这些方法的工作原理？

谢谢

Answer 1

试试这个：

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

这是动画渐变网：https://www.gradient-animator.com/

Answer 2

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

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

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

我需要一些帮助来为纹理添加渐变

I need some help adding a gradient to a texture

html

css

gradient