Question

css 代码： background: red url('smiley.gif') no-repeat top left/5px 5px？

问题： top left/5px 5px; 这个四个字段项代表什么
/5px 5px 具体是什么意思

Answer 1

您好，可以这么来理解上面的代码

 background: red url('smiley.gif') no-repeat top left/5px 5px;

代码解析如下：

1. 第一个属性值red：background-color

2. 第二个属性值url('smiley.gif')：background-image

3. 第三个属性值no-repeat：background-repeat

4. 第四个属性值top left/5px 5px：background-position / background-size

案例代码：

Answer 2

top left / 5px 5px 表示背景图片的起始排列位置是元素的左上角，图片的宽度为5px，高度为5px。就像下面这样：

Answer 3

这是一种css简写方式。
1. 格式为：background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
2. 格式里面的/，和font、border-radius的简写方式相似。
3. 存在浏览器兼容性，但目前大部分浏览器都支持这种写法。
4. background-position和background-size都可以只有一个值或两个值。

Answer 4

啥意思也没有 这是写错了 正常的 top left 意思为背景图片位置 居上 居左 如果不是位置有偏差可以写为Apx Bpx 意思图片位置为距上Apx 距左Bpx