background-image:url();を透過させたい

固定した背景画像を透過させたい

background-image:url();で指定した背景画像を透過させたいです。
opacityではほかの要素も透過してしまいますよね。
rgbaを使って背景色を透過させることはできると思いますが、
背景「画像」を透過させることはできるのでしょうか？
いろいろ試してみましたがうまくいかないので、質問させていただきました。
よろしくお願いいたします。

.container{
  background: url(image.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
}

m.ts10806

2019/02/14 00:24

コードはマークダウンのcode機能を利用してご提示ください。あと、CSSだけでなくHTMLとか実際の画面キャプチャとかもあったほうが良いです。

minnietk

2019/02/14 11:21

ご指摘ありがとうございます。次回からは画面キャプチャを付けるようにします。

行動規範の内容に同意します

回答1件

ベストアンサー

擬似要素を使うのも手かと思います。

css
1.container {
2  position: relative;
3}
4
5.container::before {
6  display: block;
7  width: 100%;
8  height: 100%;
9  content: " ";
10  position: absolute;
11  background: url(image.jpg);
12  background-size: cover;
13  background-repeat: no-repeat;
14  background-position: top center;
15  background-attachment: fixed;
16  opacity: .5;  /* 透過度を適宜指定してください */
17  z-index: -1;
18}