質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

画像を徐々に暗くしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 166

yukitur

score 9

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Airbnb</title>
  <link rel="stylesheet" href="main.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/v4-shims.js"></script>
</head>
<body>
  <header>  
      <div class="header-left">
        <i class="fa fa-amazon" aria-hidden="true"></i>
        <a href="#">概要</a>
        <a href="#">準備</a>
        <a href="#">安全</a>
        <a href="#">マネープラン</a>
      </div>
      <div class="header-right">
        <a href="#">はじめる</a>
      </div>
    </header>
  <div class="top-wrapper">
    <img src="./img/airbnb.jpg" alt="" width="100%" height="600px">
    <div class="banner">
      <div class="container">
        <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
        <p>宿泊施設の内容を記入</p>
        <input type="text" placeholder="ロケーション">
        <ul class="dropdown">
          <li class="dropdown-one">まるまる貸し切り<i id="first-icon" class="fas fa-angle-down"></i>
            <ul class="dropdown_menu">
              <li>個室</li>
              <li>シェアルーム</li>
            </ul>
          </li>
          <li class="dropdown-two">ゲスト4人<i id="second-icon" class="fas fa-angle-down"></i>
            <ul class="dropdown_menu">
              <li>ゲスト1人</li>
              <li>ゲスト2人</li>
              <li>ゲスト3人</li>
              <li>ゲスト4人</li>
              <li>ゲスト5人</li>
              <li>ゲスト6人</li>
              <li>ゲスト7人</li>
              <li>ゲスト8人</li>
              <li>ゲスト9人</li>
              <li>ゲスト10人</li>
              <li>ゲスト11人</li>
              <li>ゲスト12人</li>
              <li>ゲスト13人</li>
              <li>ゲスト14人</li>
              <li>ゲスト15人</li>
              <li>ゲスト16人</li>
            </ul>
          </li>
        </ul>
        <a class="start" href="#">はじめる</a>
      </div>
    </div>
  </div>
  <!-- <div class="main-wrapper"> -->
    <div class="wrapper_1">
      <div class="wrapper_1-left">
        <p class="head">なぜAirbnbでホスト?</p>
        <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
      </div>
      <div class="wrapper_1-right">
        <p class="head">困ったときも安心</p>
        <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
      </div>
    </div>
    <div class="line">
    </div>
    <h1 class="hosting">3ステップで簡単ホスティング</h1>
    <div class="hosting_content">
      <div class="hosting-left">
        <i class="far fa-hand-point-right"></i><br>
        <h6>無料でお部屋を掲載</h6>
        <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
      </div>
      <div class="hosting-center">
        <i class="far fa-hand-point-right"></i><br>
        <h6>ホスティング方法を設定</h6>
        <p>ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
      </div>
      <div class="hosting-right">
        <i class="far fa-hand-point-right"></i><br>
        <h6>無料でお部屋を掲載</h6>
        <p>リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます<br><br>
        <a href="#">ホストをはじめる方法をチェック</a></p>
      </div>
    </div>
    <div class="host">
      <div class="host-left">
        <i class="fas fa-quote-left"></i><br>
        <h1>「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h1><br>
        <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p><br>
        <a id="btn" href="#">ホスト実践例をチェック</a>
      </div>
      <div class="host-right">
        <img src="./img/people.jpg" alt="" width="500px" height="500px">
      </div>
    </div>
    <div class="line">
    </div>
    <div class="wrapper_2">
      <h1 class="hosting">万一の時も安心です</h1>
      <div class="wrapper_2-content">
        <div class="wrapper_2-left">
          <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
          <a href="">ホストを守るAirbnbの仕組みをチェック</a>
        </div>
        <div class="wrapper_2-right">
          <p><span class="check"></span>予約前に政府発行の身分証明書を求める権限</p>
          <p><span class="check"></span>ハウスルールに同意しないと泊まれない</p>
          <p><span class="check"></span>過去の宿泊のレビューもばっちり読める</p>
          <p><span class="check"></span>財物損害は¥100,000,000まで無料で補償</p>
          <p><span class="check"></span>$1,000,000の賠償責任保険が無料で付帯</p>
          <p><span class="check"></span>24時間365日対応グローバルカスタマーサポート</p>
        </div>
      </div>
    </div>
    <div class="wrapper_2-img">
      <img src="https://a0.muscache.com/pictures/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="" width="100%" height="auto">
    </div>
    <div class="line">
    </div>
    <div class="wrapper_3">
      <h1 class="hosting">シンプルな決済</h1>
      <div class="wrapper_3-content">
        <div class="wrapper_3-left">
          <h6>料金設定は完全に自由</h6>
          <p>料金は常に自由に選択できます。 迷ったときには、 域内需要に合わせて設定できるツールがあります。</p>
        </div>
        <div class="wrapper_3-center">
          <h6>手数料が安い</h6>
          <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3%をサービス料としていただいております。</p>
        </div>
        <div class="wrapper_3-right">
          <h6>迅速な支払い</h6>
          <p>ゲストのチェックイン後に、Paypal、直接振り込み、またはその他の利用可能な方法で受取金を送金できます。</p>
          <a href="">Airbnb収入を得るまでの流れを見る</a>
        </div>
      </div>
    </div>
  <!-- </div> -->
  <script src="main.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
body {
  margin: 0 auto;
  padding: 0;
}

header {
  background-color: white;
  position: fixed;
  z-index: 10;
  width: 100%;
  display: block;
  height: 90px;
}

.header-left {
  float: left;
  line-height: 90px;
}

.header-left a {
  text-decoration: none;
  color: #3f3e3e;
  font-size: 14px;
  font-weight: bold;
  margin-right: 30px;
}

.header-left a:active {
  border: 1px solid black;
  padding: 33px 0;
}

.header-left a:hover {
  text-decoration: underline;
}

.fa-amazon {
  margin: 0 30px;
  font-size: 30px;
  vertical-align: middle;
}

.header-right {
  float: right;
  line-height: 90px;
}

.header-right a {
  margin-right: 100px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background-color: #ff004c;
  text-decoration: none;
  border-radius: 0.5em;
  padding: 5px 15px;
}

.header-right a:hover {
  opacity: 0.7;
}

.top-wrapper {
  position: relative;
  background-color: black;
  height: 690px;
}

.top-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  padding-top: 90px;
  opacity: 0.9;
}


イメージ説明

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/07/01 23:31

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

    キャンセル

  • hentaiman

    2020/07/01 23:33

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

    キャンセル

回答 2

+2

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

動作サンプル

body {
  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);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

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

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


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

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


cssに以下を追加

.top-wrapper .imgwrap {
  position: relative;
  padding-top: 90px;
}
.top-wrapper .imgwrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%; 
  background: linear-gradient(to bottom, transparent 90px, rgba(0,0,0,0.6) 100%);
}


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

ここを修正

.top-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
/* これを削除します  padding-top: 90px; */
  opacity: 0.9;
}


これで自然に暗くなると思います^^

※ 質問に無関係なソースは、あまり載せないようお願いしますm(__)m

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/02 13:13

    解答して頂きありがとうございます!
    無事に解決することができました。
    また、質問する際にも気を付けていきたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る