我有两张图片,一张应位于包装盒的中央,另一张图片应占用所有可用空间。我在这里完成了代码,但是背景图像占据了所有可用的地方。请检查下面的代码,让我知道如何解决。
<style>
.img1 {
position: relative;
top: 50%;
left: 50%;
}
.img2{
background-image:url(html2.jpg);
}
</style>
<body>
<div id="mainDiv">
<div id="innerDiv" style="padding: 10px">
<div class="leftDiv">
<span>
<img class="img1" src="html1.jpg" width="200" height="200" >
Place Fist image here. Place image in centre of parent with 200x200 </span>
</div>
<div class="rightDiv">
<div class=img2">Place 2nd image as background and should take all space available</div>
</div>
</div>
</div>
答案 0 :(得分:0)
我认为你错过了&#34;身高&#34; on&#34; img2&#34;所以你可以在bg上看到img ...如果你不这样做,img2只会在文本后面显示bg。给你一个小提琴但不太确定你想做什么
.img2{
height: 100vh;
background-size: 100% 100%;
background-image:url(http://www.fonbruno.com/wp-content/uploads/2015/04/placeholder-1000x1000.jpg);
}