オーバーレイグラデーションの背景を作成するには？

私はWebページの開発中に見つけた問題を解決するためにいくつかの答えを探していました。私は、ウェブ上で発見これらの例のように、オーバーレイグラデーション背景を作成しようとしています：オーバーレイグラデーションの背景を作成するには？

http://meridianthemes-demo.net/the-traveler/

http://demo.themeruby.com/innovation_personal/

私のコードは、現在、次のようになります。

.image-bg{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    background: url('../images/background.jpg') center center no-repeat; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    &:before { 
 
     content: ''; 
 
\t \t position: absolute; 
 
\t \t top: 0; 
 
\t \t right: 0; 
 
\t \t bottom: 0; 
 
\t \t left: 0; 
 
\t \t background-image: linear-gradient(to bottom right, #e2dce1, #e8d5e4); 
 
\t \t opacity: .8; 
 

 
    } 
 
}

<body class="image-bg"> 
 
    <div class="container" id="main"> 
 

 
     <div class="logo"> 
 
      <h1>Background Overlay Image</h1> 
 
     </div> <!-- ./ logo --> 
 

 
    </div> <!-- ./Container -->

...

私は上記のテーマに似た何かにそのコードを変更する方法のアイデア？

ありがとうございます！

出典

2016-12-20 PRs

右の要素を点検>背景をクリックしてください。彼らが何をしたのかを知ることができます。それはおそらくあなたにソリューションを手渡しさせる以上のことを教えてくれるでしょう... IMHO。 –

スタックオーバーフローが発生したときには、十分なリサーチを行ったと仮定しましょう。そう、はい、私は以前にそれをして、本当に適切な解決策を把握することができませんでした。 – PRs

あなたのサンプルコードは情報に基づいた試行を示しています.SOの新しいスレッドの半分については言えません。どうして彼があなたを落としていたのか分かりません。 –

要素に不透明度のある単色のグラデーションを使用する代わりに、グラデーションの片側が半透明になるように、rgba（赤/緑/青/アルファ）の色でグラデーションを作成できます。不透明です。

コードを修正してこれを解消する方法を示しました。

また、ネイティブCSSでは動作しないCSS（&:before）にネストしています（SCSSなどのプリプロセッサのみ）。私はそれを以下のようにフォーマットしました。

.image-bg { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    background: url('http://i.imgur.com/NRdrfQw.jpg') center center no-repeat; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.image-bg::before { 
 
    content: ''; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1)); 
 
    z-index: -1; 
 
    } 
 

 
    .container { 
 
    height: 800px; 
 
    }

<body class="image-bg"> 
 
    <div class="container" id="main"> 
 
    <div class="logo"> 
 
     <h1>Background Overlay Image</h1> 
 
    </div> 
 
    <!-- ./ logo --> 
 
    </div> 
 
    <!-- ./Container --> 
 
</body>

出典

2016-12-20 22:49:36

助けてくれてありがとう。私は本当に草を使用していた！ – PRs

問題ありません！これが役立ったと思われる場合は、チェックマークアイコンを使用して回答を受け入れて、将来のユーザーを支援してください。:) –

これは本当に助けになりますが、コーディングを開始して身体に他のものを作成すると、背景画像は固定されたままになりますが、オーバーレイはスクロールアップします。前の例で修正しようとしていたもう一つのことでした。何か案は？ – PRs

あなたは、背景のグラデーションではなく、不透明度のためのRGBAを使用する必要があります。不透明度は、ボディ内のすべての要素がその不透明度を継承するようにします。

あなたはあなたの例では右下になるだろうと、私は...以下の私の例では135度で

を勾配を回転勾配がオーバーレイされますように私はまた、あなたがコンテナにposition:relativeを適用することをお勧め体内のコンテンツ。それが望ましい効果でない限り？

.image-bg { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    background: url('http://lorempixel.com/output/nature-q-c-1313-1259-2.jpg') center center no-repeat; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 
.image-bg:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: linear-gradient(135deg, rgba(226, 220, 225, 0.37) 0%, rgba(232, 213, 228, 1) 100%); 
 
} 
 
.container { 
 
    position: relative; 
 
}

<body class="image-bg"> 
 
    <div class="container" id="main"> 
 

 
    <div class="logo"> 
 
     <h1>Background Overlay Image</h1> 
 
    </div> 
 
    <!-- ./ logo --> 
 

 
    </div> 
 
    <!-- ./Container -->

出典

2016-12-20 22:55:55 Aaron

オーバーレイグラデーションの背景を作成するには？

答えて

関連する問題