Div 背景图片未显示
Div background-image isn't showing
我想在 div "pageIntro" 中放一张背景图片。我已经尝试将背景颜色设置为透明,多次检查图像文件路径(这肯定是正确的,因为当我使用 vsCode 在我的代码中单击它时它会弹出正确的图像)。
注意:设置背景颜色效果很好
screensnip of the div with NO background color. Background-image is set to '/img/home/flower-cup.jpg'.
screensnip of the div with GOLD background color. Background-image is still set to '/img/home/flower-cup.jpg'.
这是 div 的 CSS 及其中的所有元素:
div.pageIntro {
position: relative;
background-image: url('/img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
这是 HTML:
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>
非常感谢:)
更新:
Here's what it looks like when putting the background-image on BOTH inner and outer div. Unfortunately, it only works on the inner.
问题出在你的图像相对路径我刚刚试过你用在线图像路径编码它工作正常。
div.pageIntro {
position: relative;
background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>
您好,我可以看到您的相对路径。
如果 image
forlder 与您的 html
在同一路径中
我在您的 HTML
中看到错误。 span
没有用 a
和 img
标签正确关闭。
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"/></a></span>
</div>
你可以使用.
div.pageIntro {
position: relative;
background-image: url('./img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
或者如果它 one above
你的路径你可以使用 ..
div.pageIntro {
position: relative;
background-image: url('../img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
我创建了一个JS fiddle
我想在 div "pageIntro" 中放一张背景图片。我已经尝试将背景颜色设置为透明,多次检查图像文件路径(这肯定是正确的,因为当我使用 vsCode 在我的代码中单击它时它会弹出正确的图像)。
注意:设置背景颜色效果很好
screensnip of the div with NO background color. Background-image is set to '/img/home/flower-cup.jpg'.
screensnip of the div with GOLD background color. Background-image is still set to '/img/home/flower-cup.jpg'.
这是 div 的 CSS 及其中的所有元素:
div.pageIntro {
position: relative;
background-image: url('/img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
这是 HTML:
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>
非常感谢:)
更新: Here's what it looks like when putting the background-image on BOTH inner and outer div. Unfortunately, it only works on the inner.
问题出在你的图像相对路径我刚刚试过你用在线图像路径编码它工作正常。
div.pageIntro {
position: relative;
background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>
您好,我可以看到您的相对路径。
如果 image
forlder 与您的 html
我在您的 HTML
中看到错误。 span
没有用 a
和 img
标签正确关闭。
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"/></a></span>
</div>
你可以使用.
div.pageIntro {
position: relative;
background-image: url('./img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
或者如果它 one above
你的路径你可以使用 ..
div.pageIntro {
position: relative;
background-image: url('../img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
我创建了一个JS fiddle