点滅する背景の上にボタンを配置するにはどうすればよいですか？

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

私はそれを使っています。 私は正確にあなたのフラッシュの移行が行うか、あなたのページに挿入する方法が、これはあなたが探しているものであるかどうかを確認することになっているのか分からない： https://jsfiddle.net/virginieLGB/2wh4r1d5/1/

私はdiv要素の順序を変更しました#bgの中にdiv.bg-lightedを置き、その位置を絶対値に設定します。私はまた、ジョアンVilaçaにより示唆されるようにul.actionsが、見てきれいにしました

<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 { 
    list-style: none; 
    padding: 0; 
} 

を