如何在html中垂直部分隐藏文本

Question

这是来自名为sounddrown的网站的半隐藏文字的图像

我试图复制声音文本的半隐藏行为。它似乎不是一张照片。这是完整的website。

Answer 1

试试这个......

＆＃13;

＆＃13;

.topDiv div{
    z-index: 9999;
    position: relative;
    font-size: 24px;
    letter-spacing: 6px;
    top: 6px;
}
.topDiv{
    height: 24px;
    margin-left: 100px;
    margin-top: 40px;
    width: 190px;
    overflow: hidden;
}

＆＃13;

<div class="topDiv">
<div>
 Your Text
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最简单的方法是在照片编辑器中执行此操作，但是，使用CSS和JS，您可以做一些惊人的事情，溢出：隐藏属性是您最好的朋友。

overflow:hidden;

检查笔的链接：

http://codepen.io/damianocel/pen/Wxkpyz

将鼠标悬停在元素上，有更多很酷的选项，我现在实际上会制作一些很酷的效果。

Answer 3

如果您正在使用firefox或chrome，则可以右键单击某个站点的某些部分并按下inspect键，这将显示该站点的HTML和CSS，您可以检查某些位以查看它是如何进行的。已完成。

＆＃13;

＆＃13;

#mainlogo {
  height: 24px;
  font-family: 'Gudea', sans-serif;
  margin-left: 100px;
  margin-top: 40px;
  overflow: hidden;
}
#mainlogo div {
  z-index: 200;
  position: relative;
  font-size: 24px;
  letter-spacing: 6px;
  top: 6px;
}

＆＃13;

<div id="mainlogo">
  <div>SOUNDROWN</div>
</div>

＆＃13;

＆＃13;

＆＃13;

他们是这样做的。

Answer 4

＆＃13;

＆＃13;

div{
    font-size: 24px;
    line-height: 5px;
    overflow: hidden;
    padding-top: 9px;
}

＆＃13;

<div>Your Text</div>

＆＃13;

＆＃13;

＆＃13;