您可以使用HTML和CSS来实现带有文字叠加和背景颜色的背景图像，并使其适应4K屏幕的响应式设计。以下是一个简单的示例代码：

HTML代码：

  
  

    
Welcome to my website
    
Here is some sample text
  

CSS代码：

.container {
  position: relative;
}

.container img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.overlay h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.overlay p {
  font-size: 18px;
}

@media only screen and (min-width: 3840px) {
  .container img {
    width: 100vw;
    height: auto;
  }
}

在上面的代码中，我们使用一个

元素作为容器，其中包含一个元素作为背景图像和一个

元素作为文字叠加的容器。通过CSS的position: relative;和position: absolute;属性，我们将文字叠加的容器定位在背景图像之上。

文字叠加的容器使用了一个半透明的背景颜色background-color: rgba(0, 0, 0, 0.5);，并使用了display: flex;和相关属性来使文字垂直居中。

通过@media查询和min-width: 3840px，我们可以在4K屏幕上应用自定义的样式，将背景图像的宽度设置为100vw，即视口的宽度，以便适应大屏幕。

请注意，您需要将background-image.jpg替换为实际的背景图像路径。此外，您可以根据需要自定义样式以满足您的设计要求。

上一篇：背景图像出现多次的

下一篇：背景图像大于圆形Div CSS的问题

相关内容