这可能很简单,我无法弄明白。但我试图以gif作为背景来创造一种花卉生长的幻觉,其上有一个活动标志图像和一个捐赠按钮。
全屏时背景会在底部被切断。不知何故,图像被压低了。当您为移动响应性设置较小的屏幕时,整个图像开始出现(高度)。我不确定我做错了什么。
任何帮助将不胜感激!谢谢。以下是我目前使用的代码。
.header-wrapper{
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered { margin-left: auto; margin-right: auto; }
.align-center { text-align: center; }
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x { padding: 45px; }
.button1{
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg { background-color: #8ec63f;}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png"/>
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>
答案 0 :(得分:1)
只需在标头包装类
上添加background-position: bottom;
即可
答案 1 :(得分:0)
.header-wrapper {
width: 100%;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
background: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif) no-repeat center center fixed;
background-size: cover;
}
答案 2 :(得分:0)
您可以使用:background-position: center bottom;
.header-wrapper {
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
background-position: center bottom;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.align-center {
text-align: center;
}
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x {
padding: 45px;
}
.button1 {
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg {
background-color: #8ec63f;
}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png" />
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>