我目前希望我網頁的頂部有一個縮小的影像。但是,這會推送我擁有的所有文本,其中包括按鈕和標題。我的背景影像正在按照我想要的方式移動,但我的標題和按鈕也在移動,我根本不希望它們移動。
<div className="static-slider-head banner2">
<Container>
<Row className="">
<Col lg="6" md="6" className="align-self-center intro">
<h1 className="title">
Welcome
</h1>
<h4 className="subtitle font-light">
Filler Text
</h4>
<a
href="/"
className="btn btn-danger m-r-20 btn-md m-t-10 "
>
Filler Text
</a>
<a
href="/"
className="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
>
Filler Text <i className="fa fa-instagram"></i>
</a>
</Col>
<Col lg="6" md="6">
</Col>
</Row>
</Container>
</div>
.static-slider-head {
min-height: 36.25rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
background-size: cover;
background-position: center center;
display: table;
width: 100%;
padding: 0;
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
animation: scale 10s;
animation-fill-mode: forwards;
transform-origin: bottom right;
overflow: hidden;
.title {
color: $white;
font-weight: 700;
font-size: 70px;
line-height: 100px;
}
.subtitle {
color: $white;
line-height: 30px;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
我的文字和標題都向左移動。我要他們不動。我只希望影像移動。
uj5u.com熱心網友回復:
所以我要做的是讓帶有影像的 div 做比例只是它自己的 div,而不是作為父 div。然后我會將所有內容(減去static-slider-head
div)包裝到一個容器中,然后將所有這些內容包裝到一個主包裝器中。
然后,您可以將此代碼添加到您的 CSS,這將根據主包裝器 div 而不是正在展開的 div 來定位您的文本。
.container {
position: absolute;
top: 0;
left: 0;
}
.mainwrap {
position: relative;
}
這是一個作業示例:
.static-slider-head {
min-height: 36.25rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
background-size: cover;
background-position: center center;
width: 100%;
padding: 0;
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
animation: scale 10s;
animation-fill-mode: forwards;
transform-origin: bottom right;
overflow: hidden;
.title {
color: $white;
font-weight: 700;
font-size: 70px;
line-height: 100px;
}
.subtitle {
color: $white;
line-height: 30px;
}
}
.container {
position: absolute;
top: 0;
left: 0;
}
.mainwrap {
position: relative;
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div class="mainwrap">
<div class="static-slider-head banner2"></div>
<div class="container">
<Container>
<Row class="">
<Col lg="6" md="6" class="align-self-center intro">
<h1 class="title">
Welcome
</h1>
<h4 class="subtitle font-light">
Filler Text
</h4>
<a
href="/"
class="btn btn-danger m-r-20 btn-md m-t-10 "
>
Filler Text
</a>
<a
href="/"
class="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
>
Filler Text <i class="fa fa-instagram"></i>
</a>
</Col>
<Col lg="6" md="6">
</Col>
</Row>
</Container>
</div>
</div>
uj5u.com熱心網友回復:
可能是這樣的可能是一種方法:在影片中使用background-size
css 屬性。@keyframes
@keyframes zooming {
0% {
background-size: 100% 100%;
}
50% {
background-size: 300% 300%;
}
100% {
background-size: 100% 100%;
}
}
.header-with-bg-animation {
background-image: url('https://images.unsplash.com/photo-1668462503626-1309916ca702?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80');
animation-name: zooming;
animation-duration: 4s;
animation-iteration-count: infinite;
background-repeat: none;
background-position: center;
width: 100%;
height: 200px;
}
.header-content {
color: #FFF;
text-align: center;
padding: 40px 20px 20px 20px;
}
.header-content *{
background: rgba(0, 0, 0, .45);
}
<div class="header-with-bg-animation">
<div class="header-content">
<h3>Title</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying
out print, graphic or web designs. The passage is attributed to an unknown...</p>
<a>Click me 1</a>
</div>
</div>
uj5u.com熱心網友回復:
我使用了以下內容并且能夠縮小并保持縮小而不重復。這個解決方案還幫助我不需要修改位置,也不需要修復樣式。
.static-slider-head {
min-height: 36.25rem;
display: flex;
background-color: #D8BAE6;
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-size: 110%;
background-position: center center;
animation: shrink 2s alternate;
.title {
color: $white;
font-weight: 700;
font-size: 42px;
line-height: 54px;
}
.subtitle {
color: $white;
line-height: 30px;
}
}
@keyframes shrink {
0% {
background-size: 100%;
}
100% {
background-size: 110%;
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/534730.html
標籤:CSS
上一篇:無法在div中垂直居中文本