Question

见：https://imgur.com/a/jlJqu 来自：https://codepen.io/alanvkarlik/pen/eVmXwY

如何保持相同的线条高度但使文字可见（没有背景颜色覆盖上面的字母？）

.hover_link {
transition: 0.3s;
text-decoration: none;
padding: 0 3px;
}
.hover_link:hover {
background-color: #4b3ed4;
color: #000;
padding: 0px 3px;
text-decoration: none;
}

希望这很清楚，对不起这是我在这里发表的第一篇文章

Answer 1

您可以增加line-height以适应文字背景，请参阅文档：https://www.w3schools.com/cssref/pr_dim_line-height.asp

.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  line-height: 40px; //or so
}

body {
  background: #ccc;
}
#wrapper {
  max-width:80%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
#content {
  width:78%;
  max-width:100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top:0px;
  font-size: 4vw;
  line-height: 4vw;
  font-family: 'PT Serif', serif;
  text-align: justify;
  color: #fff;
  }
.hover_img a:hover span {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  line-height: 5.1vw;
}
.hover_link:hover {
  background-color: #4b3ed4;
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  
}

<link href="https://fonts.googleapis.com/css?family=Eczar:600|PT+Serif:b|Raleway" rel="stylesheet">

   <div id="wrapper">
      <p>SELECTED PROJECTS:</p>
        <div id="content">
              <div class="hover_img">
                + <a class="hover_link" href="#">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</a>
                + <a class="hover_link" href="#">agam decore est cu agam decore est cu</a>
                + <a class="hover_link" href="#">mel feugait inimicus id</a>
                + <a class="hover_link" href="#">ex vocibus expetenda eam</a>
                + <a class="hover_link" href="#">Eos ad meis alterum invenire Eos ad meis alterum invenire</a>
            </div><!-- content -->
</div><!-- wrapper -->

编辑：

由于您不想更改元素的line-height，因此您可以设置background:linear-gradient并在其上设置一些透明空间以获得所需的结果：

body {
  background: #ccc;
}
#wrapper {
  max-width:80%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
#content {
  width:78%;
  max-width:100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top:0px;
  font-size: 4vw;
  line-height: 4vw;
  font-family: 'PT Serif', serif;
  text-align: justify;
  color: #fff;
  }
.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
}
.hover_link:hover {
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,2989d8+20,207cca+80,ffffff+100&0+20,1+21,1+79,0+80,0+100 */
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(41,137,216,0) 20%, rgba(41,137,216,1) 21%, rgba(32,124,202,1) 79%, rgba(32,124,202,0) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(41,137,216,0) 20%,rgba(41,137,216,1) 21%,rgba(32,124,202,1) 79%,rgba(32,124,202,0) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(41,137,216,0) 20%,rgba(41,137,216,1) 21%,rgba(32,124,202,1) 79%,rgba(32,124,202,0) 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  
}

<link href="https://fonts.googleapis.com/css?family=Eczar:600|PT+Serif:b|Raleway" rel="stylesheet">

   <div id="wrapper">
      <p>SELECTED PROJECTS:</p>
        <div id="content">
              <div class="hover_img">
                + <a class="hover_link" href="#">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</a>
                + <a class="hover_link" href="#">agam decore est cu agam decore est cu</a>
                + <a class="hover_link" href="#">mel feugait inimicus id</a>
                + <a class="hover_link" href="#">ex vocibus expetenda eam</a>
                + <a class="hover_link" href="#">Eos ad meis alterum invenire Eos ad meis alterum invenire</a>
            </div><!-- content -->
</div><!-- wrapper -->

要使用此渐变，您可以使用背景渐变生成器link。

Answer 2

您可以将font-size缩减为3.7vw，同时将line-height保持在4vw，或将font-size增加到4.3vw，同时保持{{1}在font-size

https://codepen.io/anon/pen/XZbGGv

具有减少的行高的悬停文本的背景颜色隐藏文本的部分

2 个答案: