我正在与一位网站设计师合作。她有一个关于装饰网站上的 h1 标题的好主意,但我很难找到实现此目的的方法。
她的计划是通过将每个 H1 标题夹在两个视觉元素之间来居中,这两个视觉元素会调整大小以占用可用空间。将每个视觉元素视为一个双端箭头,中间有一个装饰,一条直线将它们连接起来。
您现在可以在实时网站上看到通过 CSS :before 和 :after 标签插入的静态图像(并理解她为什么讨厌这个)。这些图像是用线条连接起来的花朵,中间有环。
http://getwellgabby.org/thanks/
我认为这是 jQuery 的工作,但我不知道从哪里开始。任何为我指明正确方向的帮助将不胜感激。
最佳答案
+1 有趣的问题。
在没有完全解决这个问题的情况下,您似乎可以使用滑动门逻辑根据需要扩展和缩小图像。
http://www.alistapart.com/articles/slidingdoors2/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
使用 jQuery 的地方是动态调整宽度。因此,找到 h2
的宽度,从包含的 div
的宽度中减去该宽度,然后将结果一分为二,这就是每个侧面图像的宽度。
关于jquery - 在 <H1> 标签之前和之后自动调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6917620/