Yanıp sönen bir arka plan üzerinde bir düğmeyi nasıl ortalarım?

Question

Yanıp sönen arka planın üzerine oturmak için 'Buraya tıklayın' düğmesini almaya çalışıyorum. Düğmeye tıklanabilir olmalı, ancak arka plan görüntülerinin üzerine yapıştığında düzgün biçimlendirmiyor (merkezde kalmalı). Biçimlendirdiğim şekil şimdi görebileceğim anlamına geliyor, ancak tıklanabilir değil. Bu defa ne var:

#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 varsayılan bir vatka bunu kaldırmak gerekir.

Answer 2

Onunla bir keman yaptım. https://jsfiddle.net/virginieLGB/2wh4r1d5/1/

Ben div sırasını değiştirdik: Bu aradığınız buysa Ben tam olarak sayfanıza eklemek ama nasıl gördüğünü flash geçiş yapmak gerekiyordu olduğunu bilmek ya da yok div.bg-lighted #bg içine yerleştirerek ve konumunu mutlak olarak ayarlayın.

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

:

<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> 

Ben de ul.actions olarak da João Vilaça önerdiği, bak temizledin