CSSでボタンに背景画像を追加する方法（詳しい解説と例）-CSSチュートリアル-php.cn

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

奋力向前

リリース： 2021-07-12 17:53:53

転載

4268 人が閲覧しました

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

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

ここでは、上、左、右、下を使用して、ボタンを覆う高さと幅、さらに上記のグラデーションと透明度を調整します。マスクを上下に分割し、上は背景をグラデーションにし、下は単色にするだけで済みます（本当はマスク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 サイトの他の関連記事を参照してください。