Html 缩放时，将文本放置在背景图片的底部

我想实现一个类似的功能

如果你开始缩小窗口，你会看到背景图片底部的文字写着“精心设计以帮助商业繁荣”

CSS:

#showcase {
  min-height: 400px;
  background:url(image.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px 8px #1C242B;
  border-bottom: #45A29E 3px solid;
}

<section id="showcase">
  <div class="container">
    <h1>HELLO WORLD</h1>
  </div>
</section>

HTML:

#showcase {
  min-height: 400px;
  background:url(image.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px 8px #1C242B;
  border-bottom: #45A29E 3px solid;
}

<section id="showcase">
  <div class="container">
    <h1>HELLO WORLD</h1>
  </div>
</section>

你好，世界

---

有什么建议吗？谢谢

考虑使用媒体查询

文档：

示例：

HTML

<section id="showcase">
  <div class="inner-container">
    <h1>HELLO WORLD</h1>
  </div>
</section>
<div class="outter-container">
  <h1>HELLO WORLD</h1>
</div>

JSFiddle

---

改变

位置有多种方法：绝对到媒体查询中的
位置：相对

检查这个https://jsfiddle.net/m0fushg6/3/


.main{
位置：相对位置；
}
#展示{
最小高度：400px；
背景：url（'https://picsum.photos/5760/3840?image=1067“）无重复中心；
背景尺寸：封面；
颜色：#ffffff；
文本阴影：2PX2PX8PX#1C242B；
边框底部：#45A29E 3px实心；
}
.集装箱{
显示：内联块；
填充：10px 20px；
位置：绝对位置；
最高：50%；
转化：翻译（15%，-50%）；
颜色：#000；
字体系列：arial；
字号：700；
字体大小：32px；
线高：0；
}
@仅介质屏幕和（最大宽度：768px）{
.集装箱{
位置：相对位置；
边际上限：0px；
左：0；
左缘：5%；
变换：平移（0,0）；
填充：0；
边框：1px纯红；
}
}

你好，世界
尝试使用媒体查询

示例如下：

这就是我解决你问题的方法。
太棒了！这正是我想要的。将调整您的代码一点，但总的来说，这将让我开始！没错！我不知道还有什么要补充的，但我相信这会给你一个如何工作的想法
#showcase {
 position:relative;
 min-height: 400px;
 text-align: center;
 color: #ffffff;
 text-shadow: 2px 2px 8px #1C242B;
 border-bottom: #45A29E 3px solid;
}

.container{
/*Put your image in the container**/
  background:url(image.jpg) no-repeat center;
  background-size: cover;
/*set postion to absolute*/
  position:absolute;
/*set size of container*/
  width:100%;
  height:200px;
/*image fallback*/
  background:blue;
}

h1{
/*set postion to absolute and width to 100%*/
  position: absolute;
  width:100%;
/*To get the text centered*/
}

/*Add a media query to catch when the window is 900px*/
@media only screen and (max-width: 900px) {

/*set both container and h1 element to static*/
 .container, h1{
  position:static; 
 }

}