Question

有人可以向我解释这家酒店的情况。它的css背景可以缩小视网膜像素显示密度的一半尺寸。

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /200px 70px;

/ 200px 70px 之前的 0px 0px 部分是什么？如果我把它拿出来，背景不会缩小。这两个像素大小绑定到什么？

由于

Answer 1

第一组0px 0px定义背景图片的位置（左上角），第二组200px 70px定义尺寸，用这个简短的符号表示background-size。< / p>

如果第二组中只有一个值，则它将是图像的宽度。要设置高度，您可以执行以下操作：

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /auto 70px;

然后背景高70像素，宽度将相应缩放。查看demo，其中背景图像始终是视口的一半高。

Answer 2

为了确定您所说的内容，请考虑包含以下所有属性：

background-image: url('../img/kellin-retina.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-size: 200px 70px;

这是你的代码细分到它的含义。我不确定你的问题是什么，但尝试打开浏览器的开发工具取消选中并检查属性以查看它对页面的影响，并修改数字以更好地了解您正在做什么。如果您在制作特定作品时需要帮助，我可以帮助您制作Fiddle代码或向我显示实时网站。

css绑定中的背景大小调整？

2 个答案: