Question

任何人都可以指出我，或者为了达到这种效果而命名一些可能存在的技术：

像这样：

enter image description here

再次：

enter image description here

您可能会注意到，重点是连接两条线。其中一些行来自文本框，因为我们希望正确使用EM单位作为字体大小，文本周围的框可能会改变。

我之前从未这样做过，我会感激任何一点，为了调查这个＆＃34;效果＆＃34;请进一步。

提前致谢。

Answer 1

文本框中的字体是否在EM中无关紧要。如果字体大小改变，文本框大小将改变，但这并不意味着它们之间的空间也必须改变（它可能有一个固定的高度 - 背景高度 - ）。

这是一个非常基本的例子（尝试更改正文字体大小）：

<html>
  <head>
    <style>
      body { font-size: 12px;}
      .text { border: 1px solid #999; padding: 15px; font-size:1em; }
      .line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; }
    </style>
  </head>
  <body>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div>
    <div class="line"></div>
    <div class="text">
      Eum, quis consequuntur culpa ex eius totam nemo.
    </div>
  </body>
</html>

如果您希望在字体大小发生变化时盒子高度之间的空间发生变化，您应该将其高度设置为EM并使用背景图像，比方说，将容器原始高度加倍（所以当高度变化时，更多背景它揭晓了）。您可以在.line {}规则上看到此更改高度：50px; 更改为高度：7em; （我使用的示例图像高于容器）。

这是一个非常基本的例子。标记取决于设计。如果你需要更准确的东西（比如：你需要线条在特定位置开始和结束），你应该使用绝对/相对位置。

响应式跨浏览器和灵活的跨界背景＆＃34;图片

1 个答案:

响应式跨浏览器和灵​​活的跨界背景＆＃34;图片

1 个答案:

响应式跨浏览器和灵活的跨界背景＆＃34;图片