Question

我正在开发一个基于公司印刷品牌的网站设计，我想模仿的一个方面是围绕内容的标题的点边界中断。 (Here's an example.)如您所见，标题文本垂直居中于点边框，因此其中一半位于边缘上方，并且中断的长度将根据字长度而有所不同（尽管白色空间的数量）每个词之前和之后应该是一致的）。在某些情况下，就像照片中的那个一样，同一个矩形中会有多个标题，因此它不仅仅是需要解决的顶部边框。此设计中的背景将是图像，而不是纯色。此外，此站点具有响应性，因此需要在各种移动环境中使用变通方法，并且边框的宽度将随着空间的变化而变化。

我主要是一个具有一些前端编码能力的网页设计师，但没有太高级，所以我想知道这是否可能（一般来说，以及我的经验水平）或者我是否应该完全改变设计。有什么建议？

编辑：我添加了一张新照片来澄清我的问题，仍然希望有一种可行的方法来使用照片背景元素。谢谢！

Answer 1

是的，可以尝试进行标题显示：内联块，为其添加侧面填充，并使用它的父背景进行着色。在那之后你可以将这个标题提升到它的半高顶部。例如：

1）位置：相对; line-height：1em：top：-.5em;
2）变换：translateY（-50％）;

以下是https://jsfiddle.net/5w4hanu3/2/

的示例

h2 {
  position: relative;

  display: inline-block;
  margin: 0;
}

.top h2,
.bottom h2 {
  transform: translateY(-50%);

  padding: 0 20px;

  background: #fff;
}

在点边框中添加中断

1 个答案: