Html 动态缩放背景图像_Html_Css

Html 动态缩放背景图像

html css

Html 动态缩放背景图像,html,css,Html,Css,全部：我对CSS背景很陌生。我想知道是否有任何方法可以调整背景图像的大小，使其始终尽可能只用CSS填充视口规则是：无论图像的比例是多少，它总是将自身缩放到足以填充视口的程度，以确保没有剩余的空白空间及谢谢背景尺寸：封面和背景位置：固定背景尺寸：封面？@Adrew是的，Johannes也帮了忙。我给背景尺寸：100%，封面；这就是为什么它不起作用，但我不知道为什么？简单的原因是背景大小：100%，封面是错误的封面不能与%或其他值混合。特别是，如果您只使用一个背景图像，则不使用逗号分隔>>

全部：

我对CSS背景很陌生。我想知道是否有任何方法可以调整背景图像的大小，使其始终尽可能只用CSS填充视口

规则是：

无论图像的比例是多少，它总是将自身缩放到足以填充视口的程度，以确保没有剩余的空白空间

及

谢谢

背景尺寸：封面

和

背景位置：固定

背景尺寸：封面

？@Adrew是的，Johannes也帮了忙。我给背景尺寸：100%，封面；这就是为什么它不起作用，但我不知道为什么？简单的原因是

背景大小：100%，封面是错误的<代码>封面

不能与%或其他值混合。特别是，如果您只使用一个背景图像，则不使用逗号分隔>>>。因此

background

属性，逗号分隔允许您添加移动背景，同样也允许您修改其他属性中的每个背景样式，同样，逗号分隔：

背景图像：url（），url（）同样：背景尺寸：100%100%，封面
其中封面以第二个图像层为目标。@RokoC.Buljan谢谢，现在我知道了。我真的需要仔细阅读教程。谢谢，我想我试过了，但会留下空白，你能给我一把提琴或代码笔来比较吗？我想要一个更详细的答案，比如解释为什么这样做或浏览器兼容性。@Kuan，你能提供一把提琴吗？@Johannes谢谢，我发现我这边有什么不同，我给背景尺寸：100%100%，封面；这就是神奇的发生。但是这个数字为什么以及如何影响封面呢？是的，我也想问这个问题。
<html>
<head>
    <title>BLURRING IMG</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding:0px;
            margin:0px;
        }
        body {
            background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ferns-unsplash.jpg");
            background-position: fixed;
            background-size: 100%, cover;
        }
    </style>
</head>
<body>
</body>
</html>

background-size: auto auto, cover;

background-size: cover;