Erstellen Sie ein undurchsichtiges Textfeld oben auf einem Bild?

Question

Ich bin ein Neuling sowohl zu HTML und CSS und für das Leben von mir kann ich nicht richtig. Kann mir bitte jemand bei der Programmierung helfen?

Dies ist, was ich bisher getan haben, aber ich bin jetzt stecken und mein Bild wird überhaupt nicht angezeigt ..

<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

Es gibt einige falsche Dinge hier:

1. Wenn Sie einen Satz ny CSS-Eigenschaft wie Polsterung sollten Sie nur eine Art von Mess: px, %, em, rem ... Aber nicht zwei, wie Sie in #box1 tun. Dies ist ein Fehler.
2. Das ist Stilsache. Wenn Sie eine Eigenschaft auf 0 setzen, ist es besser, weder px noch irgendeine Art von Messeinheiten zu setzen.

Jetzt, Ihr Ziel.

Sie möchten Ihre #box1 innerhalb Ihrer .image, also sollten Sie ein Tag innerhalb einer anderen setzen, wie Sie auf meinem Code sehen konnten. Dadurch sind Sie Ihrer Lösung sehr nahe.

Als nächstes zentrieren Sie Sie #box1. Es gibt viele Möglichkeiten das zu tun, ich lege hier meinen Favoriten, aber wie immer hängt der beste Weg von der Situation ab.

#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

Sieht aus wie der Außenbehälter wird ein Hintergrundbild sein, dann haben Sie einen anderen Container, um den Text zu halten, der die Eigenschaft background-color: RGBA verwenden könnte.

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; 
} 

Bitte stellen Sie sicher, dass Sie so viel wie möglich in Ihrem Beispielcode erklären, ist also nicht hier, um Code für Sie :)

Hier ist eine ziemlich nützliche Verbindung RBGA erklären

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