css 背景色 一部だけを違う色にしたい。

Question

画像のようにbackground-colorを一部だけ変更したいです。

    <nav class="gnav">
      <ul class="gnav__list">
        <li class="gnav__list--item">院長ご挨拶・医師紹介</li>
        <li class="gnav__list--item">専門性の高い治療</li>
        <li class="gnav__list--item">グループ内連携治療</li>
        <li class="gnav__list--item">院内案内・検査体制</li>
        <li class="gnav__list--item">自費診療案内</li>
        <li class="gnav__list--item">よくあるご質問</li>
      </ul>
      <!--gnav__list--> 
    </nav>
コード

.gnav {
  background-color: rgba(158, 132, 53, 0.75);
	}
.gnav__list{
display:flex;
align-items: center;  
max-width: 1120px;
}
	  .gnav__list--item:nth-of-type(2){
		  background: rgba(141, 25, 85, 0.6); 
	  }

上記のようにコードを書いたのですが、gnav全体に背景色を指定して、さらに.gnav__list--item:nth-of-type(2)にも背景色を指定（それぞれ透過色）のため。.gnav__list--item:nth-of-type(2)の背景色がgnavの背景色と混ざって表示されてしまいます。

gnaviの背景色に影響を受けずに.gnav__list--item:nth-of-type(2)にのみにワインレッドの透過色を反映させるにはどうすればいいでしょうか?

Comments

[hatena19]

提示のCSSだけでは横並びにならないので、提示の画像のようなレイアウトになるCSSを提示してください。
横並びの方法や、背景画像をどのようにしているかによって回答が異なる可能性がありますので。

Answer 1

miyabi_takatsukさんと考え方はほぼ同じですが、せっかく書いたのであげておきます。

疑似要素に flex-grow: 1; を設定することで、miyabi_takatsukさんと考え方はほぼ同じですが、せっかく書いたのであげておきます。

疑似要素に flex-grow: 1; を設定することで、左右の余白を埋めるように幅が拡張します。

.gnav {
  display: flex;
}
.gnav::before,
.gnav::after {
  content: "";
  display: block;
  background-color: rgba(158, 132, 53, 0.75);
  flex-grow: 1;
}

.gnav__list {
  list-style: none;
  display: flex;
  max-width: 1120px;
  margin: 0;
  padding: 0;
}

.gnav__list--item {
  background-color: rgba(158, 132, 53, 0.75);
  padding: 10px;
}
.gnav__list--item:nth-of-type(2){
  background: rgba(141, 25, 85, 0.6); 
}

.gnav {
  display: flex;
}
.gnav::before,
.gnav::after {
  content: "";
  display: block;
  background-color: rgba(158, 132, 53, 0.75);
  flex-grow: 1;
}

.gnav__list {
  list-style: none;
  display: flex;
  max-width: 1120px;
  margin: 0;
  padding: 0;
}

.gnav__list--item {
  background-color: rgba(158, 132, 53, 0.75);
  padding: 10px;
}
.gnav__list--item:nth-of-type(2){
  background: rgba(141, 25, 85, 0.6); 
}

Comments

[Fukusuke0604]

ありがとうございます。解決できました。擬似要素でタイプできたのですね。大変助かりました。擬似要素の使い方勉強します。解決できました。

Answer 2

li自体に背景色を当てるようにし、
全体の背景色の表現を擬似要素を上手く使うといいかと。

/* 全体にもflexを当てる */
.gnav,
.gnav__list{
  align-items: center; 
  display: flex; 
  justify-content: center;
}
.gnav {
  /* 高さは指定したものに合わせてください */
  height: 50px;
}

.gnav::before,
.gnav::after,
.gnav__list--item {
  /* リスト全体ではなく擬似要素に基本の背景色を当てる */
  /* リスト一つ一つに基本の背景色を当てる */
  background-color: rgba(158, 132, 53, 0.75);
}

/* 共通のスタイル当て */
.gnav::before,
.gnav::after,
.gnav__list {
  height: 100%;
  flex-shrink: 0;
}

/* 擬似要素が両端に配置されるようにする */
.gnav::before,
.gnav::after {
  content: "";
  display: block;
  width: calc(50% - 560px);
}

.gnav__list {
  max-width: 1120px;
}

.gnav__list--item:nth-of-type(2){
  background: rgba(141, 25, 85, 0.6); 
}

Comments

[Fukusuke0604]

ありがとうございます。解決できました。擬似要素でタイプできたのですね。大変助かりました。擬似要素の使い方勉強します。解決できました。

お二方にベストアンサーとしたいのですが、一人しか選べないため最初に回答をくれたmiyabi様をベストアンサーとさせていただきました。

大変ありがとうございました。