CSSでボタンに背景画像を追加する方法（詳しい解説と例）

ここではボタンを使って記事に美しい写真を追加できるので、ページのスタイルを簡単に変更できます。グラデーションの背景を使用したり、ボタンの背景でボタンの色を変更したり、overflow: hidden を使用してマスクを削除したりできます。

ここでは、上、左、右、下を使用して、ボタンを覆う高さと幅、さらに上記のグラデーションと透明度を調整します。マスクを上下に分割し、上は背景をグラデーションにし、下は単色にするだけで済みます（本当はマスク1枚でも実現できますが、作り方がありません）マスク グラデーションの境界線なので 2 つ使用します)。コードは次のとおりです。 CSS コードは次のとおりです。

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

実は、CSS3 のグラデーションの使用方法を完全には理解していないため、間違いを恐れてここでは説明しません。これを行うときは、公式ドキュメントの例に従いました。

Gecko: https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit: http://webkit.org/ blog/175/introducing-css-gradients/

OK、マスク レイヤが完成しました。次にボタンを作成しましょう。ボタンレイヤーはマスクの位置決めやボタンのサイズや色を設定する必要があり、見た目を美しくするために角丸や影を付けていますが、これもCSS3の内容です。コードは次のとおりです。 CSS コードは次のとおりです。

.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

.button の背景を変更して、ボタンの色を変更します。ボタンの境界半径はマスクレイヤーの半径と同じになるように設定する必要があることに注意してください。ボタンにoverflow: hiddenを追加し、マスクの境界半径を削除しようとしました。それにも関わらず、四隅はマスクの数がまだ表示されているのはなぜですか?専門家に指示を求めてください。次に、ボタンのテキスト部分ですが、テキストがはっきりと表示されるように、このレイヤーはマスクレイヤーの上に配置する必要があります。マスク レイヤーと同様に、絶対位置を設定し、高さと幅を 100% に設定します。テキスト レイヤーはドキュメント フローのマスク レイヤーの後ろにあるため、Z インデックスを設定する必要はありません。コードは次のとおりです。 CSS コードは次のとおりです。

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

この時点で、ボタンの準備が整いました。このボタンの利点は、画像を使用しないため、HTTP 接続の数が減り、もちろんトラフィックも削減されることです。欠点は、IE が CSS3 をサポートしていないため、このボタンはあまり役に立たず、フィルターはありますが、画像を使用するほど高速ではないことです。早くIEが廃止されるといいですね。

推奨学習: CSS ビデオ チュートリアル

以上がCSSでボタンに背景画像を追加する方法（詳しい解説と例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。