css中如何设拉伸背景图片铺满屏幕

在CSS中，我们经常会用到背景图片来美化网页，但有时会遇到图片大小与屏幕不匹配的情况。这时我们可以使用拉伸背景图片的方法来铺满整个屏幕。 首先，在CSS样式中，我们需要设置背景图片的属性，比如：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

其中，background-image属性用于设置背景图片的路径，background-repeat属性用于指定是否平铺背景图片，no-repeat表示不平铺；background-size属性用于指定背景图片的大小，这里我们选择使用"cover"关键字，表示图片会被拉伸以铺满整个屏幕。 如果我们使用背景图片时还需要搭配其他元素，比如文字、按钮等，可以使用层叠样式表（CSS）来设置它们的位置和样式。以下是一个例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* 设置标题样式 */
h1 {
  margin-top: 150px;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0.5);
}

/* 设置按钮样式 */
.button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  color: white;
  background-color: #008CBA;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
}

在这个例子中，我们使用了h1标签来设定标题样式，使用.button类来设定按钮样式。其中，我们使用了绝对定位（position: absolute）来定位按钮，使用了transform属性来将按钮水平居中（transform: translateX(-50%)）。 综上所述，在CSS中设拉伸背景图片铺满屏幕的方法分别是设置background-image、background-repeat和background-size属性，可以使用绝对定位来搭配其他元素。