Question

我有一个问题，我需要删除/隐藏透明徽标后面的一行：

http://image.prntscr.com/image/80a9b209fa824c4482859000f0e4cbc7.png

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

代码：

<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>

Span将成为透明图像，这仅用于测试..

Answer 1

您可以查看Line-On-Sides Headers CSS Trick。

这样的事情：

＆＃13;

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;
}

＆＃13;

<div class="fancy"><span class="fancy">LOGO</span>
</div>

＆＃13;

Source

Answer 2

由于你有一个透明的背景，我认为唯一的方法是复制行div并将它分成两个，一个左边和一个右边，我不知道你需要的尺寸，但你应该有这样的东西：

<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>

如果您不想知道它们的位置，很难说正确的边距，如果您需要更多帮助，则应该发布整个HTML。

Answer 3

很少......

1。你坦率地说，你所包含的代码片段中的定位方法非常糟糕。我会清理它，而不是使用像padding: 43%这样的东西来定位你的元素 - 确保你在建造房屋之前有一个坚固的基础！我建议使用CSS检查一些关于定位元素的资源 - 假设你只提供了一个2行代码片段，我不能完全考虑你的情况下适当的方法。

2。

不，我不会添加黑色背景..

您承认最简单的工作答案，但您不想使用它......？为什么不？您是说您不想将背景应用于图像吗？您可以使用background-color: black;

将其添加到范围中

3。同样，我不赞成以这种方式定位元素，但是使用您的代码段（并在margin而不是{{1}上应用43％ }），你可以做到这一点：https://jsfiddle.net/dgat2q34/

要获得该行与文字之间的额外空格，您可以使用padding上的padding。

编辑： Kaiwen Huang提出了一个很好的观点 - 如果您不想使用我已经包含在我的示例中的特定黑色，您可以将范围的背景更改为{ {1}}而不是。

Answer 4

我绝对会将元素放在容器中，然后用z-index排列它们以确保它们以正确的顺序堆叠。我已经创建了一个JSfiddle，其中包含一个如何实现此功能的快速示例：

https://jsfiddle.net/bL0dfkvq/

这里的关键是文本上的z-index是：

z-index:10;

hr行的z-index为：

z-index:5;

Answer 5

您可以测试此代码：

＆＃13;

<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333;  font-size: 80px">LOGO</div></div></div>

＆＃13;

Answer 6

只需将徽标设置为比行更高z-index:。

Z-index基本上是：

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

CSS隐藏徽标背后的元素

6 个答案: