css3 设置背景图片大小

CSS3引入了新的属性，使得我们可以设置背景图片的大小。

background-image: url("example.jpg");
    background-size: 50% 100%;
    

在上述代码中，我们设置了背景图片的路径以及大小。我们使用％单位来设置图像的大小。在这个例子中，我们将图像水平缩小了50%，垂直拉伸了100%。这意味着图像将根据视窗的大小按比例缩放，以适应背景。

background-size: cover;
    

这个代码片段中，我们使用“cover”关键字来设置背景图像的大小。这意味着图像将被调整为完全覆盖元素的背景，无论是宽度还是高度。这样，图像将会被拉伸或缩小，以适应元素的大小。

background-size: contain;
    

“contain”关键字被用来设置背景图像大小。这意味着图像将被调整为适应元素的宽度或高度，以便图像的一侧可以等于元素的一侧的长度。如果图像的宽度或高度超过元素的长度，那么图像将被缩小以适应元素的长度。

使用这些新的css3属性，我们可以轻松地调整背景图像的大小，以适应我们的设计需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！