rgba()で透明度を100%から0%にするlinear-gradientを使って、背景模様をグラデーション加工するテストです。 透明度100%の白色「rgba(255,255,255,1)」から、透明度0%の白色「rgba(255,255,255,0)」に変化するグラデーションを模様画像の上に乗せることで、見た目を加工します。

サンプル1は、svgのパターンを使って背景の模様を表示してるboxです。サンプル2は、サンプル1のboxと同じものの上に子要素として同じサイズの白色グラデーションを乗せています。白色グラデーションによって下側背景の模様が隠されてグラデーション化します。サンプル3は、比較として単色（#333333）背景の上に白色グラデーションを乗せていますが、単色背景の場合は、グレーのlinear-gradientで直に指定したほうが、コードがシンプルになります。

サンプル1

サンプル2

サンプル3

htmlソース

  <h4>サンプル1</h4>
      <div class="box"></div>
  <h4>サンプル2</h4>
      <div class="box">
          <div class="white-grad"></div>
      </div>
  <h4>サンプル3</h4>
      <div class="box2">
          <div class="white-grad"></div>
      </div>

CSSソース

div.box,div.box2  {
	width:100%;
	height:150px;
	background-image:url(img3/pattern026.svg); 
	background-size:7%;
	margin:0 0 20px 0;
	}	
div.box2 {
	background:#333; 
	}	
div.white-grad  {
	width:100%;
	height:150px;
	background: linear-gradient(to bottom, rgba(255,255,255,0),rgba(255,255,255,1)); 
	}