有人可以幫我把這個影片文本放在我的 div 的左下角嗎？如果我需要改變實作影片文本的方式，我會全力以赴。我從另一個 Stack Overflow 執行緒中得到了我正在使用的示例。我正在使用 Wordpress 和 Elementor。
我的網站的鏈接是： http ://stalone.flywheelsites.com/
我正在使用的當前代碼如下：
.lyrics-container {
margin: 75% 0% 0% 0%;
}
.lyrics{
position: absolute;
font-size: 72px;
font-weight: bold;
line-height: 87%;
}
.lyrics:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.lyrics:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
} <div class="logo">Logo</div>
<div class="lyrics-container">
<p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
<p class="lyrics">I will never<br>love again.</p>
</div>注意：出于演示目的，我做了一個快速的保證金黑客攻擊，我知道這是不可行的，這就是我在這里尋求幫助的原因。
提前致謝！
uj5u.com熱心網友回復：
您需要有一個絕對定位元素的相對包裝器。這是一種常見的做法。您可能需要給包裝器一定的高度。例如 100vh 或任何你需要的。
我只是添加了最低限度。所以你將不得不處理其余的樣式。
.wrapper {
position: relative;
}
.lyrics-container {
position: absolute;
left: 0;
bottom: 0;
margin: 75% 0% 0% 0%;
}
.lyrics{
position: absolute;
font-size: 72px;
font-weight: bold;
line-height: 87%;
}
.lyrics:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.lyrics:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
} <div class="wrapper" >
<div class="logo">Logo</div>
<div class="lyrics-container">
<p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
<p class="lyrics">I will never<br>love again.</p>
</div>
</div>uj5u.com熱心網友回復：
您可以使用position: absolute;它來將其與底部對齊，而不會影響其余組件。更多關于這里position。
.lyrics-container {
width: 100%;
position: absolute;
bottom: 0;
}
.lyrics {
position: absolute;
font-size: 72px;
font-weight: bold;
line-height: 87%;
}
.lyrics:nth-child(1) {
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.lyrics:nth-child(2) {
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes fade {
0%,
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="logo">Logo</div>
<div class="lyrics-container">
<p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
<p class="lyrics">I will never<br>love again.</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421552.html
標籤：
上一篇：如何從While回圈中的最后一個字串中洗掉最后一個字符？
下一篇：洗掉手機和平板電腦上的div