画像を徐々に暗くしたい

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Airbnb</title>
7  <link rel="stylesheet" href="main.css">
8  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
10  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/v4-shims.js"></script>
11</head>
12<body>
13  <header>  
14      <div class="header-left">
15        <i class="fa fa-amazon" aria-hidden="true"></i>
16        <a href="#">概要</a>
17        <a href="#">準備</a>
18        <a href="#">安全</a>
19        <a href="#">マネープラン</a>
20      </div>
21      <div class="header-right">
22        <a href="#">はじめる</a>
23      </div>
24    </header>
25  <div class="top-wrapper">
26    <img src="./img/airbnb.jpg" alt="" width="100%" height="600px">
27    <div class="banner">
28      <div class="container">
29        <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
30        <p>宿泊施設の内容を記入</p>
31        <input type="text" placeholder="ロケーション">
32        <ul class="dropdown">
33          <li class="dropdown-one">まるまる貸し切り<i id="first-icon" class="fas fa-angle-down"></i>
34            <ul class="dropdown_menu">
35              <li>個室</li>
36              <li>シェアルーム</li>
37            </ul>
38          </li>
39          <li class="dropdown-two">ゲスト４人<i id="second-icon" class="fas fa-angle-down"></i>
40            <ul class="dropdown_menu">
41              <li>ゲスト１人</li>
42              <li>ゲスト２人</li>
43              <li>ゲスト３人</li>
44              <li>ゲスト４人</li>
45              <li>ゲスト５人</li>
46              <li>ゲスト６人</li>
47              <li>ゲスト７人</li>
48              <li>ゲスト８人</li>
49              <li>ゲスト９人</li>
50              <li>ゲスト１０人</li>
51              <li>ゲスト１１人</li>
52              <li>ゲスト１２人</li>
53              <li>ゲスト１３人</li>
54              <li>ゲスト１４人</li>
55              <li>ゲスト１５人</li>
56              <li>ゲスト１６人</li>
57            </ul>
58          </li>
59        </ul>
60        <a class="start" href="#">はじめる</a>
61      </div>
62    </div>
63  </div>
64  <!-- <div class="main-wrapper"> -->
65    <div class="wrapper_1">
66      <div class="wrapper_1-left">
67        <p class="head">なぜAirbnbでホスト?</p>
68        <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
69      </div>
70      <div class="wrapper_1-right">
71        <p class="head">困ったときも安心</p>
72        <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
73      </div>
74    </div>
75    <div class="line">
76    </div>
77    <h1 class="hosting">３ステップで簡単ホスティング</h1>
78    <div class="hosting_content">
79      <div class="hosting-left">
80        <i class="far fa-hand-point-right"></i><br>
81        <h6>無料でお部屋を掲載</h6>
82        <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
83      </div>
84      <div class="hosting-center">
85        <i class="far fa-hand-point-right"></i><br>
86        <h6>ホスティング方法を設定</h6>
87        <p>ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
88      </div>
89      <div class="hosting-right">
90        <i class="far fa-hand-point-right"></i><br>
91        <h6>無料でお部屋を掲載</h6>
92        <p>リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます<br><br>
93        <a href="#">ホストをはじめる方法をチェック</a></p>
94      </div>
95    </div>
96    <div class="host">
97      <div class="host-left">
98        <i class="fas fa-quote-left"></i><br>
99        <h1>「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h1><br>
100        <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p><br>
101        <a id="btn" href="#">ホスト実践例をチェック</a>
102      </div>
103      <div class="host-right">
104        <img src="./img/people.jpg" alt="" width="500px" height="500px">
105      </div>
106    </div>
107    <div class="line">
108    </div>
109    <div class="wrapper_2">
110      <h1 class="hosting">万一の時も安心です</h1>
111      <div class="wrapper_2-content">
112        <div class="wrapper_2-left">
113          <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
114          <a href="">ホストを守るAirbnbの仕組みをチェック</a>
115        </div>
116        <div class="wrapper_2-right">
117          <p><span class="check">✔</span>予約前に政府発行の身分証明書を求める権限</p>
118          <p><span class="check">✔</span>ハウスルールに同意しないと泊まれない</p>
119          <p><span class="check">✔</span>過去の宿泊のレビューもばっちり読める</p>
120          <p><span class="check">✔</span>財物損害は¥100,000,000まで無料で補償</p>
121          <p><span class="check">✔</span>$1,000,000の賠償責任保険が無料で付帯</p>
122          <p><span class="check">✔</span>24時間365日対応グローバルカスタマーサポート</p>
123        </div>
124      </div>
125    </div>
126    <div class="wrapper_2-img">
127      <img src="https://a0.muscache.com/pictures/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="" width="100%" height="auto">
128    </div>
129    <div class="line">
130    </div>
131    <div class="wrapper_3">
132      <h1 class="hosting">シンプルな決済</h1>
133      <div class="wrapper_3-content">
134        <div class="wrapper_3-left">
135          <h6>料金設定は完全に自由</h6>
136          <p>料金は常に自由に選択できます。 迷ったときには、 域内需要に合わせて設定できるツールがあります。</p>
137        </div>
138        <div class="wrapper_3-center">
139          <h6>手数料が安い</h6>
140          <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3％をサービス料としていただいております。</p>
141        </div>
142        <div class="wrapper_3-right">
143          <h6>迅速な支払い</h6>
144          <p>ゲストのチェックイン後に、Paypal、直接振り込み、またはその他の利用可能な方法で受取金を送金できます。</p>
145          <a href="">Airbnb収入を得るまでの流れを見る</a>
146        </div>
147      </div>
148    </div>
149  <!-- </div> -->
150  <script src="main.js"></script>
151  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
152</body>
153</html>

css
1body {
2  margin: 0 auto;
3  padding: 0;
4}
5
6header {
7  background-color: white;
8  position: fixed;
9  z-index: 10;
10  width: 100%;
11  display: block;
12  height: 90px;
13}
14
15.header-left {
16  float: left;
17  line-height: 90px;
18}
19
20.header-left a {
21  text-decoration: none;
22  color: #3f3e3e;
23  font-size: 14px;
24  font-weight: bold;
25  margin-right: 30px;
26}
27
28.header-left a:active {
29  border: 1px solid black;
30  padding: 33px 0;
31}
32
33.header-left a:hover {
34  text-decoration: underline;
35}
36
37.fa-amazon {
38  margin: 0 30px;
39  font-size: 30px;
40  vertical-align: middle;
41}
42
43.header-right {
44  float: right;
45  line-height: 90px;
46}
47
48.header-right a {
49  margin-right: 100px;
50  font-size: 14px;
51  font-weight: bold;
52  color: white;
53  background-color: #ff004c;
54  text-decoration: none;
55  border-radius: 0.5em;
56  padding: 5px 15px;
57}
58
59.header-right a:hover {
60  opacity: 0.7;
61}
62
63.top-wrapper {
64  position: relative;
65  background-color: black;
66  height: 690px;
67}
68
69.top-wrapper img {
70  -o-object-fit: cover;
71     object-fit: cover;
72  -o-object-position: top;
73     object-position: top;
74  padding-top: 90px;
75  opacity: 0.9;
76}

完成画像のよう下に行くにつれて画像を暗くしたいのですが、うまくいきません。
どうすると良いでしょうか？

m.ts10806

2020/07/01 14:31

このhtml,cssは本件解決のために全て漏れなく必要なものですか？そこだけ切り出した方が良いのでは？(回答者から観点でも)

hentaiman

2020/07/01 14:33

画像編集アプリでグラデーションかけて使ったらどうだろう

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

回答2件

たとえば以下のように「透明色→黒のグラデーション」と「画像」を重ねた背景を設定することで実現できます。

動作サンプル

css
1body {
2  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0) ) fixed,url(https://a0.muscache.com/pictures/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg);
3}

投稿2020/07/01 15:13

ku__ra__ge

総合スコア4524

ベストアンサー

グラデーションをかけたいのは ▼ この画像部分ですよね?

html
1<img src="./img/airbnb.jpg" alt="" width="100%" height="600px">

画像は直に疑似要素がかけられないのでラップします

html
1<div class="imgwrap"><img src="./img/airbnb.jpg" alt="" width="100%" height="600px"></div>

cssに以下を追加

css
1.top-wrapper .imgwrap {
2  position: relative;
3  padding-top: 90px;
4}
5.top-wrapper .imgwrap::after {
6  content: "";
7  position: absolute;
8  top: 0;
9  left: 0;
10  display: block;
11  width: 100%;
12  height: 100%; 
13  background: linear-gradient(to bottom, transparent 90px, rgba(0,0,0,0.6) 100%);
14}

疑似要素でグラデーションレイヤーを重ねます
linear-gradientの位置・色を変える事で見え方も変わります。

ここを修正

css
1.top-wrapper img {
2  -o-object-fit: cover;
3     object-fit: cover;
4  -o-object-position: top;
5     object-position: top;
6/* これを削除します  padding-top: 90px; */
7  opacity: 0.9;
8}