イメージの上に不透明なテキストボックスを作成しますか？

Question

私はhtmlとcssの初心者です。私の人生では、私はこの権利を得ることができません。誰かがこれをコーディングするのを助けてくれますか？

これは私がこれまでにやっていることですが、今私がこだわっていると、私のイメージがまったく表示されない...

<div class="image"></div> 

<div id="box1"> 
    <h2>Welcome to the home of</h2> 
    <h1>Oliver & Sons</h1> 
    <p title="Oliver & Sons - Exquisite Carpentry"> 
     In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship at it’s best. 
    </p> 
</div> 

#box1 { 
    width: 100%; 
    padding: 100%px; 
    border: 2px solid navy; 
    margin: 0px; 
    background-colour: white; 
} 

div.image { 
    background: url(Images/background.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

Answer 1

いくつか間違ったことは、ここにあります

1. あなたが設定した場合あなたが#box1でそうであるように、px、%、em、rem ...でもない2：あなただけmessureの一種を使用する必要がありパディングのようなNYのCSSプロパティ。これはエラーです。
2. これはスタイルの問題です。プロパティを0に設定した場合は、pxに設定されていない方が良いでしょう。

今、あなたの目標。

#box1を.imageの中に入れたいのであれば、自分のコードで見られるように、1つのタグを別のタグに入れる必要があります。そうすれば、あなたはあなたのソリューションに非常に近いでしょう。

次の事はあなたに#box1を中心にしています。それを行うにはたくさんの方法があります、私はここに私のお気に入りを置くが、いつものように、最良の方法は状況に依存する。

#box1 { 
 
    width: 50%; 
 
    border: 2px solid navy; 
 
    margin: 0 auto; 
 
    color: #FFF; 
 
    background: navy; 
 
    opacity: 0.8; 
 
    border-radius: 5px 
 
} 
 

 
div.image { 
 
    padding: 20px; 
 
    background: url(http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<div class="image"> 
 

 
    <div id="box1"> 
 
    <h2>Welcome to the home of</h2> 
 
    <h1>Oliver & Sons</h1> 
 
    <p title="Oliver & Sons - Exquisite Carpentry"> 
 
     In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship 
 
     at it’s best. 
 
    </p> 
 
    </div> 
 

 
</div>

Answer 2

は、外側容器のように見えますbackground-color：RGBAプロパティを使用できるテキストを保持する別のコンテナがあります。

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

.container { 
    height: 100%; 
    background: url(link/to/image) center center; 
    background-size: cover; 
    // Use prefixes 
} 

.inner-container { 
    background-color: rgba(255, 255, 255, 0.6); 
    color: #000; 
    width: 500px; 
    margin: 60px auto; 
} 

SOます:)

ここ

が

https://css-tricks.com/rgba-browser-support/

RBGA

を説明するかなり便利なリンクであるため、コードにはここではない、あなたのコード例では、できるだけ多くを説明していることを確認してください