Question

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

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

我希望每一方都是＃2a2b2c，中心从＃555454开始。

我的CSS有点弱，有人可以帮助我，也许可以指出我可以在哪里学习这些方法的工作原理吗？

由于

Answer 1

＆＃13;

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">Section 1
      </button>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="section1" class="section container-fluid">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

</div>
<div id="section2" class="section container-fluid">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div>
<div id="section3" class="section container-fluid">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

</div>

＆＃13;

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

＆＃13;

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

这对于动画渐变：https://www.gradient-animator.com/

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

2 个答案: