【问题标题】:What does this line mean in CSS?这条线在 CSS 中是什么意思?
【发布时间】:2016-10-31 16:29:18
【问题描述】:

这一行在 CSS 中是什么意思?

#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover

我正试图弄清楚。在W3S 中,它对结构进行了以下说明,但我似乎看不到“/”是什么以及其他属性如何与此结构匹配。

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

【问题讨论】:

    标签: css syntax background background-size


    【解决方案1】:

    这一行

    background: #ffffff url(...) no-repeat center center / cover;
    

    其实是以下的简写形式:

    background-color: #ffffff;
    background-image: url(...);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    

    / 是有效的 CSS,请参阅 formal syntax on MDN

    【讨论】:

    • 这只适用于 FireFox 吗?
    • 不,不是。请参阅 MDN 上的 background-size
    【解决方案2】:

    如果你把它分开,你会看到它按顺序读取以下内容:

    background-color | background-image | background-repeat | background-position | background-size

    【讨论】:

    • 速记有效,/cover 不是无效的。它是背景大小。
    【解决方案3】:

    根据documentation - cover 是缩放图像的特殊值:

    cover 值指定背景图像的大小应为 尽可能小,同时确保两个维度都大于 或等于容器的相应大小。

    这是他们的sample fiddle

    【讨论】:

      【解决方案4】:

      表示这张图片覆盖了白色背景; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg,它居中对齐,并且会拉伸以适应宽度或高度(以最大者为准),同时保持其比例。

      【讨论】:

      • 不是 "or" -- 覆盖范围会拉伸以适应宽度并额外裁剪。
      猜你喜欢
      • 2015-01-27
      • 1970-01-01
      • 2010-11-02
      • 1970-01-01
      • 2012-05-04
      • 1970-01-01
      • 1970-01-01
      • 2023-03-18
      • 2020-01-22
      相关资源
      最近更新 更多