在图像上创建一个不透明的文本框？

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

看起来外部容器将是一个背景图像，然后你将有另一个容器来容纳可以使用background-color：RGBA属性的文本。

div

请确保您在示例代码中尽可能多地解释，因此不在此为您编码:)

这是一个非常有用的链接，解释RBGA

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

Answer 2

这里有几个错误的东西：

1. 当您设置任何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>