我想在div "pageIntro "里面放一个背景图片。我试过将背景色设置为透明,检查了无数次图片文件路径(当然是正确的,因为当我用vsCode在代码中点击它时,它会弹出正确的图片)。
注意:设置背景色也可以
div的屏幕截图,没有背景色。背景图片设置为'imghomeflower-cup.jpg'。
金色背景的DIV的屏幕截图。Background-image仍然设置为'imghomeflower-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>
谢谢你:)
嗨,我可以看到你的相对路径。
如果 image
老人与你同路 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提琴
问题是你的 图像相对路径 我刚刚尝试了你的代码与在线图像路径,其工作正常。
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>