Question

我是HTML新手在w3school做了一些研究，但不清楚如何在一个div中将图像放在这个背景图像上的这三个不同位置。我标记了我需要放置图像的位置。 div将覆盖webkit和基于moz的浏览器中的整个页面。考虑div的任何宽度和高度。如何根据您考虑的宽度和高度确定位置。我无法将背景图片放到整个html或正文等中。它只能在一个div或section中。

<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
    <span class="">Page 1</span>
    <div class="">
        <!-- Content Goes Here -->
    </div>
</div>

Answer 1

如果您希望可以查看多个图像背景，请访问：http://www.w3schools.com/css/css3_backgrounds.asp

Answer 2

我会像这样设置html：

New-Object ... | Add-Member -MemberType NoteProperty -Name "Mac-Address" -Value $macaddress

对于每个id＆＃34; imageX＆＃34;你可以设置一个背景图像。通过显示：内联块，宽度和位置，您可以将它们放在您想要的位置。

Answer 3

这是使用相对CSS定位实现这一目标的一种非常简单的方法。

您可以使用背景div，并在其中放置您需要的div。

＆＃13;

    *{
      margin:0;
      padding:0;
    }

    .background{
      background:url('http://lorempixel.com/1000/1600/nature');
      background-size:cover;
      height:100vh;
      width:100%;
    }

    .img1,
    .img2,
    .img3{
      position:relative;
      width:300px;
      height:150px;
      background:url('http://placehold.it/300x150');
    }

    .img1{
      top:20px;
      left:350px;
    }

    .img2{
      top:150px;
      left: 20px;
    }

    .img3{
      top:350px;
      left:150px;
    }

＆＃13;

<div class="background">
  <div class="img1"></div>
  <div class="img2"></div>
  <div class="img3"></div>
</div>

＆＃13;

Answer 4

有多种方法可以实现这一目标。您可以将div的position设置为absolute并将其调整到您希望的位置

 #div1 {
 position : absolute;
 left : 100px;
 top : 200px;     
 }

您还可以将位置设置为relative，并将div放置在相对于正常位置的位置。

您可以查看more information on the position property;

Answer 5

您可以在DIV中插入DIV。您可以使用顶部和左样式属性来定位DIV。

    <div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
        <span class="">Page 1</span>
        <div id="subpanel_1" style="top:20px; left:102px;>
            <!-- Content Goes Here -->
        </div>
        <div id="subpanel_2" style="top:200px; left:50px;>
            <!-- Content Goes Here -->
        </div>
    </div>

当然，不是内联地编写样式定义，而是将它们放在单独的＆lt; style＆gt; ...＆lt; / style＆gt;中。块。

选择父div的位置

5 个答案: