CSS背景位置顶部右侧角落。

Question

我希望一个按钮上的背景图片 出现在右上角。

我已经成功使用了 background-position: bottom top 100px 来将图像移动到顶部，但我一直没有成功将图像移到右边。

是否有类似于 background-position: bottom top 100px, right 900px 的东西可以产生所需的结果？

#AddNewMeetingButton {
    position: absolute;
    top: 0;
    text-align: center;
    background-image: url(Images/add_icon_48x48.png);
    background-position: bottom top 100px, right 800px;
    background-repeat: no-repeat;
    height: 190px;
    width: 915px;
    background-color: transparent;
    outline: none;
    border: none;
    z-index: 2;
}

- Spencer H

---

Tried float:right;? - Scott

Answer 1

类似这样的东西

background-image: url(http://i.stack.imgur.com/cW9aK.png);
background-repeat: no-repeat;
background-size: 48px 48px;
background-position: right 10px top 10px;

JSfiddle示例

MDN参考文献

background-position:<position> 其中：

<position> 是一个到四个值，表示相对于元素框边缘的 2D 位置。可以给出相对或绝对偏移量。请注意，位置可以设置在元素框之外。

所以：

background-position: right 10px top 10px;

将图像放置在顶部/右侧，但距离右侧边缘10px，离顶部边缘10px

- Paulie_D

Answer 2

你可以尝试以下方法：

background-position: right top;

如果您需要添加边距，请将其添加到图像中。

- germanfr

---

几乎可以，但边距不会影响背景图片。 - Paulie_D

我的意思是仅指图像本身，没有 CSS 边距。但你的回答更好。 - germanfr

Answer 3

使用简写属性在一个声明中设置背景属性：

background: #ffffff url("img_tree.png") no-repeat right top;

使用这个简写属性，你可以按照下面详细介绍的方式进行排序

1.) 背景颜色：三种有效的颜色格式，如“红色”，十六进制值 #000000，一个 RGB 值，如“rgb(255,0,0)”

2.) 背景图片：url

3.) 背景重复：repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

4.) 背景附着：scroll|fixed|local|initial|inherit;

5.) 背景位置：如下所示的值组合

左上

左中

左下

右上

右中

右下

中上

中心

底部中心

- Muthukumar

Answer 4

尝试：

float:right;

应该可以了，否则我认为您需要将按钮元素的父元素的位置属性设置为"relative"。

首先尝试使用float:right属性。

- Jay Parekh