私は「ここをクリック」ボタンを点滅する背景の上に座らせようとしています。私はボタンをクリック可能にする必要がありますが、私はそれを背景画像の上に貼り付けると、正しくフォーマットされません(中央に座る必要があります)。私はそれをフォーマットする方法は、私はそれを見ることができることを意味しますが、それはクリック可能ではありません。これは私がこれまで持っているものです。点滅する背景の上にボタンを配置するにはどうすればよいですか?
#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>