Css 在图像顶部创建不透明文本框？

我对html和css都是新手，我一生都无法做到这一点。有人能帮我编码吗

这就是我到目前为止所做的，但现在我被卡住了，我的形象根本没有出现

欢迎来到我们的家 奥利弗父子公司

在我的工作室里，耐心、技巧和完美的精度结合在一起，生产出独特的、精致的口味和品质，很可能成为你们家的传家宝。探索我的画廊，当您准备好体验最佳工艺时，请与我联系。

框1{ 宽度：100%； 填充：100%px； 边界：2件坚固的海军； 边际：0px； 背景颜色：白色； } 部门形象{ 背景：urlmages/background.jpg； 背景大小：100%100%； 背景重复：无重复； }

---

看起来外部容器将是背景图像，然后您将有另一个容器来容纳文本，该容器将使用背景色：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;
}

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

这里有一个非常有用的链接来解释RBGA

---

这里有几个错误的地方：

当您设置任何CSS属性（如padding）时，您应该只使用一种消息：px、%、em、rem。。。但不是两个，正如您在第1框中所做的。这是一个错误。 这是风格问题。将属性设置为0时，最好不要设置px，也不要设置任何类型的测量单位。 现在，你的目标

您希望将box1放在您的.image中，因此您应该将一个标记放在另一个标记中，正如您在我的代码中看到的那样。这样做，您将非常接近您的解决方案

下一件事是把你放在盒子1的中心。有很多方法可以做到这一点，我把我最喜欢的放在这里，但是，一如既往，最好的方法取决于具体情况

框1{ 宽度：50%； 边界：2件坚固的海军； 保证金：0自动； 颜色：FFF； 背景：海军； 不透明度：0.8； 边界半径：5px } 部门形象{ 填充：20px； 背景：urlhttp://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg; 背景大小：100%100%； 背景重复：无重复； } 欢迎来到我们的家 奥利弗父子公司

在我的工作室里，耐心、技巧和完美的精度结合在一起，生产出独特的、精致的口味和品质，很可能成为你们家的传家宝。探索我的图库，当您准备好体验工艺时，请与我联系 最好是这样。

---

你试过什么吗？从基础开始-看起来您需要一个带有背景图像的元素。你能试一试吗？请看一下。请考虑重新打开这个问题。我已经编辑了我的答案，以显示到目前为止我所做的代码。我真的需要帮助。这个答案给你一个跳跃的开始你的要求。请考虑重新打开这个问题。我已经编辑了我的答案，以显示到目前为止我所做的代码。我真的需要你的帮助，这真是太棒了！非常感谢你。只是一个问题，正如您前面提到的，我不应该在同一个css属性中使用%和px。如果我只使用%如何计算百分比？当你使用百分比设置测量时，你是在使用与家长相关的测量。因此，如果父对象的宽度为1000px，子对象的宽度为50%，浏览器会将子对象的宽度设置为500px