更改背景后如何防止文本褪色？ CSS\HTML答案

【问题标题】：How can I prevent my thext from fading after changing background? CSS\HTML更改背景后如何防止文本褪色？ CSS\HTML
【发布时间】：2019-04-28 18:38:49
【问题描述】：

我从 Codepen 获取的一些代码有问题，试图根据我的需要进行修改。我希望能够在屏幕左上角的背景中看到“我们的办公桌”，我想知道为什么，但是当背景改变时，跨度会消失。谢谢！这是小提琴：https://jsfiddle.net/zm8ps24a/1/

HTML

<body> 
    <span class="svc-title"> Our Desks
    </span>
<section id="section-1">
  <div class="hover-link flexboxcenter">   
    <div class="nav-1">
      <a href="#" id="nr-1" class="hvr-underline-from-center">Oldschool Desk</a>
        <div class="bg-1"></div>
      <br>
      <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">Modern Desk</a>
        <div class="bg-2"></div>
      <br>
      <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">Modern Desk Version 2</a>
        <div class="bg-2"></div>
    </div>
  </div>

</section>

</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);

/* General */



#nr-1:hover + .bg-1,#nr-2:hover + .bg-2{
  opacity:8.0;
}

.flexboxcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1 {

  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
}

.hover-link {
  height: 100px;
  width: 100%;
  z-index: 100000;
}

.hover-link .nav-1 {
  z-index: 10000;
}

.hover-link .nav-1 a {
  top:50px;
  text-align: center;
  display: block;
  font-family: 'Droid Serif', serif;
  text-decoration: none;
  color: black;
  font-size: 50px;
  letter-spacing: 1px;
  padding: 10px;
  transition: all 500ms ease-in-out;
}

/* Background classes */

.bg-1 {
  position: absolute;
  top: 0px;
  left: 0px;
    background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
  background-size: cover;
    height: 200vh;
    width: 100%;
    z-index: -1;
  opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}

.bg-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
  background-size: cover;
    height: 200vh;
    width: 100%;
    z-index: -1;
    opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

/* Hover effect classes */

.new {
  color: white !important;
  opacity: 1 !important;
}

.bla {
  opacity: 0.3;
}

/* Hover Effect Underline From Center by Ian Lunn */

.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #63A9A9;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
.svc-title{
  position:relative;
  font-size:20px;
  font-family:'Heebo';
  float:left;
  left:20px;
  top:10px;
  opacity:1;
  color: #a2a3a7;
}

//Updated

$(function() {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Second script - Hover effect on active link

$('.hover-link .nav-1 a').hover(function() {
    $(this).addClass("new");
  },
  function() {
    $(this).removeClass('new');
  });

只是为了说明基本代码是由 Håkan-Filip Swahn 编写的。

【问题讨论】：

标签： javascript html css hover

【解决方案1】：

我有点挣扎，我通过添加修复它

#section-1 {
  position: relative;
  z-index: 5;
}

.svc-title {
    position: relative;
    font-size: 20px;
    font-family: 'Heebo';
    float: left;
    left: 20px;
    top: 10px;
    opacity: 1;
    color: #a2a3a7;
    z-index: 6;
}

#section-1 是导航链接的父级

【讨论】：

【解决方案2】：

span 消失了，因为它的 z-index CSS 属性低于其他元素。将更高的 z-index 属性值添加到“.svc-title”，跨度将保持可见：

.svc-title{
  position:relative;
  font-size:20px;
  font-family:'Heebo';
  float:left;
  left:20px;
  top:10px;
  opacity:1;
  color: #a2a3a7;
  z-index:100001;
}

【讨论】：

不错！谢谢它的工作，请另一个问题，我怎样才能让整个文本留下？试图改变 .flexboxcenter 对齐但没有成功。有什么想法吗？
将 .hover-link .nav-1 a 从 text-align: center; 更改为 text-align: left;
如果你想要它一直向左，也将.flexboxcenter justify-content 和 align-items 更改为“left”
如何更改整个部分的颜色/背景？顺便说一句，感谢它对我的帮助！