**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答案。
这个问题是由一个打字错误或一个无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
3天前关闭。
Improve this question
所以我有一个横幅部分,我希望一个图像作为横幅的背景。我已经尝试了多种解决方案,我试着在BFinner-Event部分设置背景图片。我正在使用shopify,并已将图片上传到assets文件夹。我还试着将背景图片链接到(assets/banner.png)但这也不起作用。
下面是我的代码:
<section class="BFinner-Event">
<div class="BFimgContainer">
{% if section.settings.image != blank %}
<img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" class="BFimgContainerimg">
{% else %}
{% capture current %}{% cycle 1,2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg'}}
{% endif %}
</div>
<input type="text" value="15Off" id="BFdiscountCode" style="display: none;">
<button class="BFButton" onclick="copyDiscount()">{{section.settings.BFButtonText}}</button>
<div class="BFtwoContainer">
<div class="BFthreeContainer">
<div class="BFfourContainer">
<h1 class="BFconTitle">{{section.settings.title}}</h1>
<div style="color: white;"> {{section.settings.description}} </div>
<a href="{{section.settings.button_link}}" class="#">{{section.settings.button_label}}</a>
</div>
</div>
</div>
</section>
<span class="copySpan" id="copied"></span>
<style>
.BFinner-Event {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30vh !important;
/* background-color: #f2f2f2; */
height: 15vh;
/* background: black; */
/* background-image: url ({{ 'banner.png' | asset_img_url: 'original' }});
background-size: cover; */
background-image: url ('banner.png');
}
@media only screen and (min-width: 1480px) {
.BFtwoContainer {
max-width: 60%;
}
}
@media only screen and (max-width: 1479px) {
.BFtwoContainer {
max-width: 70%;
}
}
@media only screen and (max-width: 1220px) {
.BFtwoContainer {
max-width: 60%;
}
}
.BFconTitle {
margin: 0;
color: white;
/* display: flex;
justify-content: center; */
}
.BFimgContainer {
height: 175%;
transform: scale(1.25);
}
.BFimgContainerimg {
height: 100%;
}
@media only screen and (min-width: 1040px) and (max-width: 1480px) {
.BFinner-Event {
height: 20vh;
}
}
@media only screen and (max-width: 640px) {
.BFinner-Event {
height: 25vh;
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 320px) {
.BFinner-Event {
height: 22vh;
}
}
@media only screen and (max-width: 640px) {
.BFButton {
transform: translateY(-45%) !important;
}
}
@media only screen and (min-width: 250px) and (max-width: 759px) {
.BFtwoContainer {
max-width: 90%;
margin: 0 10vw 0vh 10vw;
}
}
@media only screen and (max-width: 680px) {
.BFtwoContainer {
margin: 0 10% 0 0;
}
}
@media only screen and (max-width: 640px) {
.BFtwoContainer {
top: -5vh;
position: relative;
margin: 0 5% 0 5%;
transform: translateY(20%);
}
}
@media only screen and (max-width: 640px) {
.BFconTitle {
display: flex;
justify-content: center;
}
}
@media only screen and (max-width: 680px) and (min-width: 148px){
.BFimgContainer {
position: relative;
}
}
}
@media only screen and (max-width: 640px){
.BFimgContainer {
height: 70%;
top: -5vh;
}
}
</style>
2条答案
按热度按时间qhhrdooz1#
这里的问题是background-image属性的url和左括号之间的空格。
替换:
With(移除的空格):
如果你去掉空间,它应该工作得很好。希望这有帮助。
neskvpey2#
添加背景的简单方法是:
用你自己的图片替换URL,并确保图片的URL是正确的,并在新窗口中加载。其他属性只是临时的,你可以用你的要求替换所有属性。