在圖像頂部創建一個不透明的文本框？

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. 當您設置一個ny CSS屬性像填充你應該只使用一種信息：px,%,em,rem ......但不是兩個，就像你在#box1中做的那樣。這是一個錯誤。
2. 這是風格的問題。當您將屬性設置爲0時，最好不要設置爲px，也不要設置任何類型的消息單元。

現在，你的目標。

您想讓您的#box1位於您的.image之內，因此您應該將一個標籤放在另一個標籤內，就像您在我的代碼中看到的那樣。這樣做你會非常接近你的解決方案。

接下來的事情是以你爲中心#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; 
} 

請確保您解釋儘可能在你的例子代碼，所以不在這裏的代碼爲你:)

這裏是一個非常有用的鏈接解釋，RGBA

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