CSS设置h1背景图片如何仅右对齐而不移动整个h1区块

要仅调整背景图片位置、不改动h1区块本身布局，使用CSS自带的background-position属性即可，该属性专门用于控制背景图在元素内部的定位，不会影响元素本身的文档流位置。

你之前使用的float: right是作用于整个元素的浮动属性，控制的是h1区块本身在父容器中的对齐规则，自然会导致整个标题右移，不符合仅调整背景图的需求。

你需要在现有h1的CSS规则中加入如下声明：

background-position: right center;

这里的right代表水平方向对齐区块右侧，center代表垂直方向居中对齐，你也可以根据实际需求调整参数：

• 垂直靠上对齐：background-position: right top;
• 垂直靠下对齐：background-position: right bottom;
• 自定义边距：如果需要背景图和区块右侧保留一定留白，可使用多值语法，比如background-position: right 15px center; 代表背景图距离区块右边缘15px，垂直居中。

修改后的完整代码如下：

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;
    /* 新增背景定位规则 */
    background-position: right center;
}

内容的提问来源于stack exchange，提问作者clkhlum02