Question

我直接在我的html中有一张图片，这是一张小图片，我试图将这张图片移到我网站的右上角，但无论我把它放在哪个属性，它都不会移动。< / p>

这是我的代码：

     <div class="first_part">
     <h1>Roger Albert</h1>

     <p>Entrepreneur, auteur et co-fondateur d'OpenClassrooms</p>
     </div>
  <img src="image/13531.png" class="flottant"  alt="Profil picture"/>

我的css

         body 
     {
        font-size: 14px;
        font-family: 'Noto Serif', serif, Arial;
        background-image: url(image/background1.jpeg); 
        background-repeat: no-repeat;
        background-size: 100%;
     }

      .first_part

  {
     text-align: center;
  }

      .flottant

  {
       background: top right;   
  }

Answer 1

有很多方法可以做到这一点。您应该查看CSS flexbox以更好地控制您的定位。但是现在您可以使用position: relative float: right和bottom: 75px作为一种非常简单的方法来执行此操作。请参阅代码段：

＆＃13;

body {
  font-size: 14px;
  font-family: 'Noto Serif', serif, Arial;
  background-image: url(image/background1.jpeg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.first_part {
  text-align: center;
}

.flottant {
  float: right;
  position: relative;
  bottom: 75px;
}

＆＃13;

<div class="first_part">
  <h1>Roger Albert</h1>
  <p>Entrepreneur, auteur et co-fondateur d'OpenClassrooms</p>
</div>
<img src="image/13531.png" class="flottant" alt="Profil picture" />

＆＃13;

Answer 2

你确实有这个＆＃34;到处都是＃34; :)尝试阅读一些关于HTML和CSS基础知识的教程，但基本上你想要做的是：

将图像包装在容器中：

<body> <div id="container"> <img src="image/13531.png" class="flottant" alt="Profil picture"/> </div> </body>
为容器提供position:relative;属性，并提供您想要定位的元素position:absolute; top:0px; right:0px;。
使主体和容器都具有一定的大小，例如使用body, #container { width:100%; height:100%; }的100％视口。

请查看您自己的代码，body标记中您使用的是与背景系列不同的属性。如果你想设置背景的位置（虽然在这种情况下它不起作用，因为你的图像不是背景，而是HTML标签本身），你可以使用background-position: top right;。

我建议https://www.w3schools.com/。

css属性：我的属性的行为不适用

2 个答案: