问题描述
我想在常规背景之上添加波浪形背景,但图像并未完全伸展。它必须是绝对位置(否则它会干扰我的导航并将其向下移动 img 的高度)。 JSFiddle。我已经尝试过 object-fit: fill
也没有奏效。提前致谢
我的代码:
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg,#0061ff,#60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
@-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
@keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
解决方法
不是将 css 应用到 #background,而是将其应用到 #background img 中,这就是您要更改对象适合属性的地方。
替换这个
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
有了这个
#background img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 15%;
}
您可以查看下面的输出
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg,#0061ff,#60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
@-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
@keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
使用此属性
#background{
background:url(...);
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat;
height: 500px;
width:100%
}
,
您可以将 width
和 height
设置为 100%
,以便它应该包含容器的所有空间:
#background img {
width: 100%;
height: 100%;
}