Question

我正在尝试将“点击此处”按钮放在闪烁的背景上。我需要按钮可点击，但当我将它贴在背景图像上时，它不能正确格式化（必须坐在中心）。我现在格式化的方式意味着我可以看到它，但它不可点击。这就是我到目前为止所做的：

#bg {
  padding: 16em 0 13em 0;
  background-attachment: fixed;
  line-height: 1.75;
  text-align: center;
  position: fixed;
  width: 100%;
  background-attachment: fixed;
  background-image: url("https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919");
  background-position: center top;
  background-size: cover;
  line-height: 1.75;
  text-align: center;
  z-index: -2;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
}
.flashit {
  -webkit-animation: flash ease-out 10s infinite;
  -moz-animation: flash ease-out 10s infinite;
  animation: flash ease-out 10s infinite;
  animation-delay: 2s;
}
@-webkit-keyframes flash {
  from {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  93% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.2;
  }
  96% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
@keyframes flash {
  from {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  93% {
    opacity: 0.6;
  }
  94% {
    opacity: 0.2;
  }
  96% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.bg-lighted {
  padding: 16em 0 13em 0;
  background-attachment: fixed;
  line-height: 1.75;
  text-align: center;
  background: url('https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919');
  background-position: center center;
  background-origin: content-box;
  background-size: cover;
  background-attachment: fixed;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  z-index: -1;
}

<div id="bg">

  <p>TEST TEXT</p>
  <ul class="actions">
    <li><a href="#" class="button special big">Click here</a>
    </li>
  </ul>
</div>
<div class="bg-lighted flashit"></div>

Answer 1

    ul.actions {
       list-style: none;
       padding: 0;
    }

ul有一个默认的填充，你需要删除它。

Answer 2

我做了一个小提琴。我不知道您的Flash转换应该做什么或者如何将其插入页面，但看看这是否是您正在寻找的： https://jsfiddle.net/virginieLGB/2wh4r1d5/1/

我通过在#bg中放置div.bg-lit来更改div的顺序，并将其位置设置为绝对值。

<div id="bg">
  <p>TEST TEXT</p>
  <ul class="actions">
    <li><a href="#" class="button special big">Click here</a></li>
  </ul>
  <div class="bg-lighted flashit"></div>
</div>

我也清理了ul.actions外观，JoãoVilaça也建议：

ul.actions {
  list-style: none;
  padding: 0;
}

如何将按钮置于闪烁的背景上？

2 个答案: