CSS将元素隐藏在徽标后面

乔恩·霍尔姆

我有一个需要在透明徽标后面删除/隐藏线条的问题:

白线必须在徽标旁边,但不应在徽标后面显示。-不,我不会添加黑色背景。

代码:

<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
  • 跨度将变为透明图像,这仅用于测试。
尼基扳手

您可以查看侧边标题CSS技巧。

像这样的东西:

body {
  background-color: black;
  color: white;
}
.fancy {
  line-height: 0.10;
  text-align: center;
  font-size: 81px;
  margin-top: 20px;
}
.fancy span {
  display: inline-block;
  position: relative;
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-top: 1px solid white;
  top: 0;
  width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>

来源

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章