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

♥ 0

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

このトピックには2件の返信、2人の参加者があり、最後にのぶやんにより3年、 6ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2021年5月14日 12:21 AM #75650

のぶやん
閲覧者

♥ 22

【お使いの 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

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

2021年5月14日 8:26 AM #75663
キタジマタカシ
参加者

♥ 2421
こんな感じでどうでしょう？
```
.c-page-header__bgimage::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
}
```
♥ 1

いいねをした人:
2021年5月15日 12:22 PM #75768

のぶやん
閲覧者

♥ 22

キタジマさん

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

♥ 1

いいねをした人:
投稿者

投稿