为什么背景尺寸不包含这种情况下的工作?

问题描述 投票:-1回答:2

我不明白为什么在这种特定情况下,属性background-size:contains不起作用。在这种情况下,更改背景尺寸:包含背景尺寸:封面确实有效!为什么?

这里我的代码笔:https://codepen.io/JMainol/pen/eYpbQyg

html

<body>

</body>

css

body{
margin: 0;
padding: 0;
background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
background-repeat: no-repeat;
background-size: contain;

}

css contains background-size
2个回答
0
投票

很好的问题。包含属性仅在存在与图像比例相对定义的区域时使用。包含属性将图像缩放到尽可能大的程度,而不会对其进行裁剪或拉伸。

虽然当图像可以拉伸到任何比例时都使用cover属性,因此html正文标签具有无限的比例(高度和宽度),但实际上可以有很大的不同。如果图像的比例与元素的比例不同,则将其垂直或水平切割,以确保没有空白。

为了说明我的解释,我在您提供的css中又添加了2行。

body{
  width: 1920px;
  height: 1080px;
    background: url('https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ') no-repeat center;
    background-size: contain;
}

添加高度和宽度比例时,图像尺寸将根据“包含”属性进行调整。但是,如果没有高度和宽度,则Contain属性不会有任何效果。


0
投票

您的身体没有任何内容,因此,由于身体的高度为0,因此将不会应用背景图片:

body{
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
        background-repeat: no-repeat;
        background-size: contain;
    }
<body></body>

或者您甚至可以调整填充:

body{
    margin: 0;
    padding: 1rem;
    background:   url(https://lh3.googleusercontent.com/proxy/-6w3o1Xo04RZwWw86XzQ7TakArUKvRGUF0l-2o25my6y8W47rSTqjOyfVYEg8qZPgkzbQAEoBZQfyiQ-0Hpm72MIRTeCjeUhxtBKt1fenboarbMxo3TrU5cBdbRfvav1377ZearzLWB2ds6_uT_KJs2lKPYo3GxSkYj84XqG5c6JK_2-6MDiSOC8i6KecAopJQ);
    background-repeat: no-repeat;
    background-size: contain;
}
<body></body>
© www.soinside.com 2019 - 2024. All rights reserved.