将图像右对齐但不移动整个部分

Question

我这里有一个代码，它使用 CSS 将图像作为 h1 header 部分的背景。我想让它做的是把图像放在右边。我尝试过的是使用 float: right 尝试将图像对齐到 header 的右侧，但相反，它会将整个 h1 移动到我不想做的右侧。有没有办法只移动图像而不移动整个东西？

我的代码在这里

h1{
    background-color: #002171;
    color: #FFFFFF;
    font-family:Georgia, 'Times New Roman', Times, serif;
    background-image: url(sunset.jpg);
    height: 72px;
    background-repeat: no-repeat;
    text-align: center;
    padding-bottom: .5em;
}

Answer 1

用于背景图片

 background-position: right; instead of float :right

Answer 2

您可以使用 background-position 将图像向右移动，此代码段还将背景大小设置为包含，以便无论 header/viewport 尺寸和纵横比如何，始终可以看到整个图像。

h1 {
  background-color: #002171;
  color: #FFFFFF;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-image: url(https://picsum.photos/id/1016/300/200);
  background-position: right center;
  background-size: contain;
  height: 72px;
  background-repeat: no-repeat;
  text-align: center;
  padding-bottom: .5em;
}

<h1>Heading</h1>

将图像右对齐但不移动整个部分

Align image to the right but not move the entire section

html

css

web

styles

css-float