Question

我事先问了一个问题，并得到了一些惊人的反馈，对此深表感谢！

再次在这里，看看我是否在正确的轨道上。

我在Wordpress中为较旧的客户端创建的网站的

Here is a screenshot部分。如您所见，有一个图像，下面有一个框，其中包含文本。

需要注意的重要事项是：

图像（例如，这是牙科客户图像）。
图片下方有一个浅色背景框。
文本包含在所说的框中（不仅仅是标题和按钮）。
整个过程都是响应式的。
图像的右下角有一个小的Blur /标题，占图像的1/2和图像的1/2。
这是包装器中2列布局中的第一个。

我试图在HTML和CSS中复制它，但我认为为时已晚（2:30 AM）或我走错了路。我在Photoshop中做了一个非常非常粗糙的模型，以完成我要完成的工作。颜色无关紧要，我只是想显示自己想要实现的差异。

https://ibb.co/DpCQnKF

我在下面附加了HTML，但似乎无法使文本停留在框内。我没有放置任何CSS，因为出于某些奇怪的原因，我似乎无法弄清楚。

再次感谢您，并为错误的HTML致歉。我来自6年的Wordpress背景，而这样的事情是理所当然的。

干杯

更新：

尝试添加Div，但它仍显示在框的约束范围之外。
尝试将添加作为标题，但这仅允许我添加少量文本。

.SampleHeadline {
  font-size: 30px;
  text-align: center;
}

<div class="column">
  <img src="images/image4.jpg" alt="Image4" class="imageblock" />
  <h2 class="SampleHeadline"> Sample Headline</h2>
  <P> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus tellus quis</P>
</div>

Trying to replicate this-浅蓝色只是一个小的Blur /标题，在图片上显示1/2/1/2。当我尝试时，文本超出了框的范围，并且没有响应。希望能够在文本中添加彩色的BG使其突出。

再次感谢您，

干杯

HTML和CSS模糊吗？

0 个答案: