【问题标题】:An image in the middle of an HR tagHR 标签中间的图像
【发布时间】:2015-08-14 16:29:48
【问题描述】:

我需要类似这个 hr 标签的东西

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

JSFiddle

但我需要一个图像而不是 ASCII 符号。我尝试将内容“”和背景设置为背景图像,但我没有运气。

【问题讨论】:

标签: css


【解决方案1】:

而不是

content: '';

使用url(<url>) 表示法:

content: url(http://i.stack.imgur.com/yUzqW.png);

hr.style-eight {
  margin-top: 2em;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.style-eight:after {
  content: url(http://i.stack.imgur.com/yUzqW.png);
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}
<hr class="style-eight" />

外部JS Fiddle demo,用于实验。

参考资料:

【讨论】:

  • 你说的很对。我试过这个,但我的 URL 语法错误(使用 ASP.NET MVC)。一旦我将该图像上传到 imgur 并使用该 URL 进行测试,我可以看到我的语法已关闭。
  • 在这种情况下,我很高兴能帮上忙! :)
  • 关于此解决方案的注意事项,以及整个解决方案,是 Internet Explorer 不支持 :after css 对空元素。这导致我的居中图像仅显示在其他浏览器中。
【解决方案2】:

http://jsfiddle.net/gfweqd7y/1/

content: url(image.what ever);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-09-05
    • 2019-01-26
    • 2013-10-27
    • 2021-05-26
    • 2011-12-24
    • 1970-01-01
    • 1970-01-01
    • 2012-01-21
    相关资源
    最近更新 更多