2016-10-01 14 views
0

私は最近、をとてもシンプルにしようとしていますしかし、私が8年生になると、私の今後の科学フェアのためにチック - タック - 背景色を背景色の下に置くとデザインがよく見えます。私がgitlab repoでsinarioを再現しようとすると、私は思ったことをやり続けません。あなたが今理解していないなら、私はかなり初心者です。2つの背景画像を重ねる方法

誰かが私にコードのスニピットやそれを行う方法のアイデアを与えることができたら、それは高く評価されます。

私はすべてのスタックをチェックしましたが、それは私のappologiesを繰り返す場合は同様の質問を見つけることができません。

EDIT:ソースコードを取り出し

+0

http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css?rq=1 –

+1

私は上記のコードを自分自身で試みたが、病気をもたらす私のコードのexerpが、それは良く見えません。助けを感謝します –

+1

あなたは8年生です、あなたのコードの外観についてはあまり心配しないでください。 :)元の投稿を編集し、{}ボタンを使用してコードの書式を設定し、すべてのインデントと折り返しが正しく出力されるようにします。がんばろう! – Anders8

答えて

0

body { 
 
    margin: 0; 
 
    background-color: rgba(100,0,0,.75); 
 
} 
 

 
div { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-image: url("https://media.starwars.ea.com/content/starwars-ea-com/en_US/starwars/galaxy-of-heroes/news/_jcr_content/ogimage.img.jpg"); 
 
    opacity: .5; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}
<div></div>

私は、少なくとも1つのHTML要素なしで解決策を見つけることができませんでしたが、私は、これはスタックする明確に十分な能力を示して願っていますbackground-imageおよびbackground-colorに不透明度の値を指定します。

+0

ありがとう、あなたのコードは本当に役に立ちました –

+0

今日はコードを試していましたが、入力したものが透明な背景色の裏か画像のすぐ後ろにあることに気付きました。すべてが2つの背景要素の前にある必要があります。 –

+0

@Smail 'z-index'の値を変更して、バックグラウンドが残りの要素の後ろにとどまるようにします。 – StardustGogeta

関連する問題