画像編集せずCSSで画像を暗くする方法

Question

1.jpg~3.jpgの画像を
うっすら暗くしたいのですが全く変わりません。
CSSのどこがおかしいのか教えていただけると助かります。

.bannermenu_list li:nth-child::before{
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}

.bannermenu_list li:nth-child(1) {
background-image: url(../img/1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bannermenu_list li:nth-child(2) {
background-image: url(../img/2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bannermenu_list li:nth-child(3) {
background-image: url(../img/3.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Comments

[Lhankor_Mhy]

:nth-child
の後にかっこをつけない書き方は初めて見ましたが、これは有効なのですか？

[m.ts10806]

現状の問題点と、出力はどうなっているのでしょうか

[m.ts10806]

あと、css構文チェックは必ず通してください。問題切り分け全くされていない状態で丸投げしています

Answer 1

.bannermenu_list li:nth-child::before というような書き方はできないので、
.bannermenu_list li:::beforeでしょうね。

あとは、li に対してサイズを指定して、position: relative;が必要になるでしょう。

.bannermenu_list li {
  width: 400px;
  height: 400px;
  position: relative;

}