Question

我想实现类似于this的功能。

如果您开始缩小窗口，您可以看到文字说＆＃34;设计用于帮助业务蓬勃发展＆＃34;转到背景图像的底部。

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;
}

HTML：

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

有关如何执行此操作的任何建议？谢谢。

Answer 1

考虑使用媒体查询。

文档： https://www.w3schools.com/css/css3_mediaqueries_ex.asp

示例： https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_ex1

<强> HTML

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

<强> CSS

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

.inner-container {
  display: inline;
}

.outter-container {
  display: none;
}

@media screen and (max-width: 600px) {

  .inner-container {
    display: none;
  }

  .outter-container {
    display: inline;
  }
}

<强>的jsfiddle https://jsfiddle.net/qckv1cua/3/

Answer 2

通过在媒体查询中将position: absolute;更改为position: relative，有多种方法可以做到这一点。

检查此https://jsfiddle.net/m0fushg6/3/

.main {
  position: relative;
}

#showcase {
  min-height: 400px;
  background: url('https://picsum.photos/5760/3840?image=1067') no-repeat center;
  background-size: cover;
  color: #ffffff;
  text-shadow: 2px 2px 8px #1C242B;
  border-bottom: #45A29E 3px solid;
}

.container {
  display: inline-block;
  padding: 10px 20px;
  position: absolute;
  top: 50%;
  transform: translate(15%, -50%);
  color: #000;
  font-family: arial;
  font-weight: 700;
  font-size: 32px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .container {
    position: relative;
    margin-top: 0px;
    left: 0;
    margin-left: 5%;
    transform: translate(0, 0);
    padding: 0;
    border: 1px solid red;
  }
}

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

Answer 3

尝试使用媒体查询。

此处的示例：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

CSS

#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; 
 }

}

这就是我解决问题的方法。

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

3 个答案: