Question

为什么我的徽标没有出现在我的div的右上角？

＆＃13;

.service-title {
  width: 100%;
  font-size: 24px;
  line-height: 1.1em;
  padding: 1em;
  background-position: right top;
  background: orange;
  background-image: url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
  background-repeat: no-repeat;
}

＆＃13;

<h1 class="service-title"><a href="/">test</a></h1>

＆＃13;

Answer 1

这种情况正在发生，因为您使用background-position简写覆盖了background属性。

说明：

背景指定：

其缩写的初始值的串联   属性：
背景图像：无
背景位置：0％   0％
背景大小：自动自动
背景重复：重复
  background-origin：padding-box
background-style：本身就是一个   简而言之，它的初始值是它自己的速记的串联   属性
背景剪辑：border-box
背景颜色：   透明

（来源：mdn background）

因此，当您设置background: orange（在CSS中background-position之后）时，它会隐式提供background-position: 0% 0%;，因此它会覆盖您的背景位置语句。

解决方案：

您需要在background-position速记之后放置background属性，以便不会覆盖它：

.service-title {
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em;
    background:orange;
    background-position: right top;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
}

<h1 class="service-title bg-orange icon-logo-clipped"><a href="/">test</a></h1>

或指定background-color而不是background速记，因此不会覆盖背景位置。

.service-title {
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em;
    background-position: right top;
    background-color:orange;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
}

<h1 class="service-title bg-orange icon-logo-clipped"><a href="/">test</a></h1>

Answer 2

background: orange;行超过了background-position。这是因为background是定义所有其他背景属性的简写属性，例如大小，颜色，图像，当然还有位置。这里是 MDN - shorthand background property文章。

将background更改为background-color或将其放在background-position

之前

.service-title {
  width: 100%;
  font-size: 24px;
  line-height: 1.1em;
  padding: 1em;
  background-position: right top;
  background-color: orange;
  background-image: url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
  background-repeat: no-repeat;
}

<h1 class="service-title"><a href="/">test</a></h1>

Answer 3

使用此：

.service-title {
    width: 100%;
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em; 
    background:orange;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
    background-position: right top;
}

demo

div右上角的位置标志

3 个答案:

说明：

解决方案：