Question

我正在尝试在带有背景图片的全角标题中堆叠带有右对齐网站标题和标语的徽标。这在html模块中相对简单，但如果可能的话我想在头模块中这样做（因此客户端可以轻松地更改背景图像）。问题是徽标不会与标题和标语保持右对齐，而是随着窗口大小和缩放级别的变化而水平移动。我附上了两张图片，标有desired和mis-aligned来显示问题。

我一直在尝试使用::before伪类：是否有可能堆叠徽标，网站标题和网站标语并使它们对齐？我试图在具有背景图像的全宽标题中堆叠带有右对齐网站标题和标语的徽标。问题是徽标不会与标题和标语保持右对齐，而是随着窗口大小和缩放级别的变化而水平移动。

我一直在尝试使用::before伪类：

.site-title::before {    
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png")     
    no-repeat;
    display: block;
    clear: both;
    width: 150px;
    height: 150px;
    right: 150px;
    position: absolute;
    top: 0px;
    margin-top: 90px;
    margin-bottom: 0px;
}

Answer 1

我真的没有意识到使用::before这一点，因为您可以将徽标作为h1上方的图像放在HTML中。无论如何，您可以轻松地执行此操作：befre通过给出h1 position: relative以使:: before内容相对于h1定位。然后您只需调整徽标的位置。 E.g。

h1 {
    position: relative; 
    margin-top: 0; 
    padding-top: 130px;
}
.site-title::before {
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png") no-repeat;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    margin:0;
}

在响应环境中右对齐文本和图像堆栈

1 个答案: