[のぶやん]

【お使いの Snow Monkey のバージョン】14.2.2
【お使いの Snow Monkey Blocks のバージョン】 11.2.1
【お使いの Snow Monkey Editor のバージョン】 5.0.5
【お使いのブラウザ】Google Chrome 90.0.4430.212
【当該サイトのURL】ローカル

### 実現したいこと
投稿記事ページのヘッダー画像を、追加CSSなどで薄暗くしたい

### 試したこと
投稿ページの記事タイトルをページヘッダー画像上に表示する設定にしていますが、使用している画像に明るい色が多いため、そのままだと視認性がよくありません。

ページヘッダー上のテキストを読みやすくするために影をつける

アイキャッチ画像の表示設定を「ページヘッダーの上にタイトルを表示」にしている場合は、ページヘッダー上にタイトル…

snow-monkey.2inc.org

⬆こちらの記事を参考に、現在はテキストの影に濃淡を付けつつ.c-page-header__contentの背景を少し暗くしています。

 

こうではなく、アイキャッチ画像自体を薄暗くした方が便が良さそうなのですが、CSSなどで手を加えることは可能でしょうか？

【現在】

【希望の状態】

お詳しい方がいらっしゃいましたら、教えてください！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こんな感じでどうでしょう？

.c-page-header__bgimage::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
}

♥ 1

いいねをした人:

[のぶやん]

キタジマさん

意図したとおりになりました、ありがとうござます。疑似要素の勉強します。

♥ 1

いいねをした人:

[投稿者]

投稿