Question

我正在尝试在以下网站上实现此效果： enter image description here

HTML：

<h1 class="bigHeadline">Trendy lobby og business center i Københavns centrum</h1>

CSS：

padding: 3px 0 0;
font-size: 44px;
line-height: 57px;
margin: 0 auto;
display: inline;
-webkit-box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
background-color: rgba(0,0,0,.7);
color: #fff;
font-family: Roboto;
font-weight: 200;
text-transform: uppercase;

我需要使文本始终保持关闭状态（删除之间的无色笔划），但是如果我尝试用行高校正它，则在调整大小和/或其他浏览器时会中断。

Answer 1

这是我的解决方法：

CSS：

#bigHeadline {
  display: inline-block;
  padding: 1vh 1vw;  
  margin: 0 4vw;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);  
  font-family: Roboto;
  font-weight: 200;  
  text-transform: uppercase;
  -webkit-box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
  box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
  background-color: rgba(0,0,0,.7);
}

<h1 id="bigHeadline">
  Trendy lobby og business center 
</h1>

<h1 id="bigHeadline">
  I Københavns centrum
</h1>

我已将文本分为两个h1，这样您就可以更轻松地控制两个文本。我还使用了一个显示：inline-block，这样，两段文本将始终位于另一段文本上方（“ block”部分），但是由于背景应仅覆盖文本，因此需要“ inline”部分

同一元素中的拆分文本的背景色

1 个答案: