css3怎么拉伸图片「css 背景图片拉伸」

1. 基本用法

background-size属性的基本用法非常简单。你只需要设置一个值，这个值可以是以下几种：

• cover：这是默认值，背景图片会被放大或缩小以完全覆盖容器。
• contain：背景图片会被放大或缩小以适应容器，但不会超出容器的边界。
• 50% 50%：背景图片的宽度和高度都会被设置为容器宽度和高度的一半。
• 100px 200px：背景图片的宽度会被设置为100px，高度会被设置为200px。

2. 多个值

你可以同时设置两个值，例如50% auto，这样背景图片的宽度会被设置为容器宽度的一半，高度会被设置为自动。

3. 百分比和关键字的组合

你也可以使用百分比和关键字的组合，例如50% contain，这样背景图片的宽度会被设置为容器宽度的一半，高度会被设置为容器的高度（如果需要的话）。

4. cover和contain的区别

cover和contain的主要区别在于它们如何调整背景图片的大小。cover会尽可能地让背景图片覆盖整个容器，即使这意味着背景图片的某些部分会被裁剪掉。而contain则会尽可能地让背景图片适应容器，但不会超出容器的边界。

5. background-repeat属性

如果你想让背景图片在拉伸后重复显示，你可以使用background-repeat属性。这个属性有四个值：no-repeat（不重复）、repeat（重复）、repeat-x（水平重复）和repeat-y（垂直重复）。

6. background-position属性

如果你想改变背景图片的位置，你可以使用background-position属性。这个属性可以接受两个值，第一个值是水平位置，第二个值是垂直位置。你可以使用像素、百分比或者关键词（如center、top、bottom等）来指定这两个值。

7. 兼容性问题

需要注意的是，虽然大多数现代浏览器都支持background-size属性，但一些旧版本的浏览器可能不支持。如果你需要在这些浏览器中使用这个属性，你可能需要使用一些JavaScript库，如jQuery或者CSS3 PIE。

8. 示例代码

以下是一些使用background-size属性的示例代码：

div {
    background-image: url('image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

在这个例子中，背景图片会被放大或缩小以完全覆盖div元素，而且不会被重复显示。背景图片会居中显示。

相关问题与解答

问题1：我可以在非容器元素上使用background-size属性吗？

答：不可以。background-size属性只能用于元素的背景图片，不能用于元素的内联图片或者其他类型的图片。如果你需要在非容器元素上使用这个属性，你需要先将这个元素转换为一个容器元素，例如通过添加一个空的div元素。

问题2：我可以使用JavaScript来动态改变background-size属性的值吗？

答：可以。你可以通过修改元素的style属性来动态改变background-size属性的值。例如，你可以使用以下JavaScript代码来将一个div元素的背景图片大小设置为100px：

var div = document.getElementById('myDiv');
div.style.backgroundSize = '100px';