我不明白为什么在这种特定情况下,属性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;
}
很好的问题。包含属性仅在存在与图像比例相对定义的区域时使用。包含属性将图像缩放到尽可能大的程度,而不会对其进行裁剪或拉伸。
虽然当图像可以拉伸到任何比例时都使用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,因此将不会应用背景图片:
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>