响应式设计下背景图叠加文本与按钮 适配WordPress B2B落地页首屏

适配CSS代码 #

你可以将以下代码添加到WordPress后台「外观」-「自定义」-「额外CSS」入口即可实现目标效果：

/* 首屏外层容器基础配置 */
.corp-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* 背景图自适应配置，避免变形溢出 */
.corp-hero picture img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* 文本容器绝对定位，叠放在图片上方、左侧垂直居中 */
.texts-and-cta {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 420px;
}
/* 主标题样式，可按需调整字号匹配设计 */
.texts-and-cta h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
/* 副标题样式 */
.texts-and-cta h2 {
  font-size: 1.25rem;
  margin-bottom: 1.8rem;
  line-height: 1.5;
  font-weight: 400;
}
/* 紫色CTA按钮样式 */
.cta-btn-purple {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: #6241a1;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background 0.3s;
}
.cta-btn-purple:hover {
  background-color: #4f3288;
}
/* 移动端适配，避免文本溢出屏幕 */
@media (max-width: 768px) {
  .texts-and-cta {
    left: 5%;
    max-width: 90%;
  }
  .texts-and-cta h1 {
    font-size: 2rem;
  }
  .texts-and-cta h2 {
    font-size: 1rem;
    margin-bottom: 1.2rem;
  }
  .cta-btn-purple {
    padding: 0.6rem 1.5rem;
  }
}

如果你需要把按钮文本改为「View Gifts」，直接修改现有HTML中a标签内的Shop Gifts文本即可。如果显示位置和设计图有细微偏差，调整.texts-and-cta的left、top参数或者各文本字号即可完美适配。

内容的提问来源于stack exchange，提问作者CodeForGood