主页 / 问题 / 1254856
Accepted
Руслан Камов
Asked:2022-03-12 17:35:19 +0000 UTC2022-03-12 17:35:19 +0000 UTC

后台属性中心center/cover是什么意思？

  • 772

我遇到了以下代码

    background:url(../img/bg/main_bg.jpg) center center/cover no-repeat;

我无法理解他。第一个中心让背景图片在中心可见，第二个，最难理解的，再次在中心，但是一个斜线和某种封面，第三个参数是，我知道，不要重复图片。

通常我总是遇到下面这样的例子，一切都清楚什么去了哪里。

    background: #FFD7C4 url(/002/bg1.gif) top left repeat-x;

在我引用的第一个中，没有什么是清楚的。

css

2 个回答

  1. Best Answer

    背景：[背景附件|| 背景颜色 || 背景图片 || 背景位置 || 背景重复] | 继承

    关于二center是定位

    CSS2.1
    背景位置：[左 | 中心 | 对 | <兴趣> | <值>] || [顶部 | 中心 | 底部 | <兴趣> | <值>] | 继承

    CSS3
    背景位置：<位置>[，<位置>]*

    位置本身如下：

    <位置> = [左 | 中心 | 对 | <兴趣> | <值>] || [顶部 | 中心 | 底部 | <兴趣> | <值>] | 继承。

    background-position 属性有两个值，一个水平位置（可能是左、中、右）和一个垂直位置（可能是上、中、下）。除了使用关键字，还可以用百分比、像素或其他单位指定位置。如果使用关键字，则它们出现的顺序无关紧要，使用百分比表示法，首先设置图片的水平位置，然后在空格后设置垂直位置。使用的关键字与百分比条目之间的关系如下。

    • 左上 = 左上 = 0% 0%（左上）
    • 顶部 = 顶部中心 = 中心顶部 = 50% 0%（中心顶部）
    • 右上角 = 右上角 = 100% 0%（右上角）
    • 左 = 左 中 = 中 左 = 0% 50%（左和中）
    • center = center center = 50% 50% (居中)
    • 右 = 右中 = 中右 = 100% 50%（右和中）
    • 左下 = 左下 = 0% 100%（左下）
    • 底部 = 底部中心 = 中心底部 = 50% 100%（以底部为中心）
    • 右下 = 右下 = 100% 100%（右下角）

    括号指示背景图像相对于容器的位置。

    /cover是背景大小，即：

    背景尺寸：[ <值> | <兴趣> | 自动]{1,2} | 封面| 包含

    背景的总体设计如下所示：

    <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || attachment> || <box> || <box>

    在这里阅读更多

    • 3

  2. 在此处输入图像描述

    如图所示，我们照常写出所有属性的值，用空格隔开。例外是属性background-position，并且background-size- 它们必须用斜杠分隔/

    取自这里

    至于这两个center，一个在x轴上，另一个在y轴上。

    • 1

相关问题