cssでブートストラップウェルのバックグラウンドのみを表示

私はウェルがあるブートストラップページを持っています。井戸には背景としてのイメージがあるはずです。しかし、イメージはすべての井戸のために始めるべきではありません。ページ全体の下になければなりません。最初の井戸の下では画像の最初の部分が見え、2番目の井戸の下ではもう少し画像の一部が見えるはずです。cssでブートストラップウェルのバックグラウンドのみを表示

私はその背景を持つdivにすべてを入れて、ウェルの背景を透明にしてみましたが、うまくいきませんでした。あなたはどうしますか？

これは、ここでは画像がすべての井戸から始まることです。

.well { 
 
    background: url("https://s-media-cache-ak0.pinimg.com/736x/49/6b/65/496b65edfa8065b1e938dcf25287d9d0.jpg"); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     
 
    <h1>page</h1> 
 
    <div class="well">hello</div> 
 
    <div class="well">bye</div> 
 
    </div> 
 
</body> 
 
</html>

それは井戸のすべての数のために働く必要があります。したがって、3分の1を追加すると、もう少しフルイメージをもう一度取得する必要があります。より多くの井戸がある場合、イメージは大きく、それは繰り返すことができます。

出典

2017-01-03 Tristan T

どのようにうまく背景を透明にしましたか？ – zmbq

.well {background：transparent;} –

もう1つの解決策があります。背景画像はcoverとfixedなければならない：

body {padding:20px} 
 

 
.container { 
 
background: gray; 
 
} 
 
.well { 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
background-image: url("http://lorempixel.com/output/nature-q-c-640-480-4.jpg"); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h1>page</h1> 
 
    <div class="well">hello</div> 
 
    <div class="well">bye</div> 
 
    <div class="well">hello</div> 
 
    <div class="well">bye</div> 
 
</div>

出典

2017-01-03 14:17:36 Banzay

うわー...これはクールです...これはもう一つの解決策ではありません。 **これは解決策です！** –

まあ、私の計画はそれを私のページにスクロールさせることでしたが、これは同じように見えます。（この文の意図しない使用） –

cssでブートストラップウェルのバックグラウンドのみを表示

答えて

関連する問題