Question

我用Bootstrap 3制作了横幅，将图片设置为背景图片，因为我想控制图片的大小< 768px：

Demosite with banner as a background image in css

链接1 ：我选择了另一种方法来解决此问题，因此，我现在使用html5 <picture>标签设置了图片：

我的问题是我需要将文本和按钮从link 1的页面转换为link 2的页面。我试图在图片周围设置一个容器，但是我无法使文本和按钮适应相同的方式。

有人知道我该如何解决吗？

body {
  background-color: #f5f5f5;
}


/* Set width between grid elements */

.small-padding.top {
  padding-top: 10px;
}

.small-padding.bottom {
  padding-bottom: 10px;
}

.small-padding.left {
  padding-left: 5px;
}

.small-padding.right {
  padding-right: 5px;
}

.margin_bottom {
  margin-bottom: 10px;
}

.row [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.img-responsive {
  height: 100%;
}


/* Position of buttons/text in a single grid element */

.inner-wrapper {
  text-align: center;
  background: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Color on text */

.dark-font {
  color: #333;
}

.light-font {
  color: #fff;
}


/* Set full width on columns */

@media (max-width: 768px) {
  .img-responsive {
    /*EDIT*/
    width: 100%;
    height: auto;
  }
  .btn-success {
    width: fit-content;
  }
  /* Here you go */
  .height-m {
    height: 350px;
  }
}

@media (max-width: 991px) {
  h3 {
    font-size: 1.2em;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12 margin_bottom">
        <picture>
          <source media="(min-width: 650px)" srcset="http://vouzalis.dk/1024.jpg">
          <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
          <img src="http://vouzalis.dk/1024.jpg" alt="Flowers" style="width:100%;">
        </picture>
        <div class="inner-wrapper bottom-left">
          <h2 class="light-font">Here is headline 1</h2>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

根据我对您的问题的了解，您可以尝试以下操作：

<div class="container-fluid">
    <div class="row">
    <div class="col-xs-12 col-sm-12 margin_bottom">
        <picture>
            <source media="(min-width: 650px)" srcset="http://vouzalis.dk/1024.jpg">
            <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
            <img src="http://vouzalis.dk/1024.jpg" alt="Flowers" style="width:100%;">
        </picture>
        <div class="inner-wrapper bottom-left">
          <h2 class="light-font">Here is headline 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-primary" role="button">Our Services</a>
        </div>
    </div>
</div>

并将左下角的类CSS更改为此：

.bottom-left {
  position: absolute;
  top: 40%;
  left: 20%;
  text-align: left;
}

Answer 2

使用Bootstrap主题实现这一目标的一种方法是使用position: absolute。您可以将文本包装在容器中，例如header-container，并使用left和top属性相对于父级调整位置。

body {
    background-color: #f5f5f5;
  }
  
  
  /* Set width between grid elements */
  
  .small-padding.top {
    padding-top: 10px;
  }
  
  .small-padding.bottom {
    padding-bottom: 10px;
  }
  
  .small-padding.left {
    padding-left: 5px;
  }
  
  .small-padding.right {
    padding-right: 5px;
  }
  
  .margin_bottom {
    margin-bottom: 10px;
  }
  
  .row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .img-responsive {
    height: 100%;
  }
  
  
  /* Position of buttons/text in a single grid element */
  
  .inner-wrapper {
    background: none;
  }
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 16%;
    left: 6%;
  }

  .header-container {
      color: white;
      margin: 0 5%;
  }
  
  
  /* Color on text */
  
  .dark-font {
    color: #333;
  }
  
  .light-font {
    color: #fff;
  }
  
  
  /* Set full width on columns */
  
  @media (max-width: 768px) {
    .img-responsive {
      /*EDIT*/
      width: 100%;
      height: auto;
    }
    .btn-success {
      width: fit-content;
    }
    /* Here you go */
    .height-m {
      height: 350px;
    }
  }
  
  @media (max-width: 991px) {
    h3 {
      font-size: 1.2em;
    }
  }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>TEMPLATE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    
    <body>
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-12 margin_bottom">
            <picture>
              <source media="(min-width: 650px)" srcset="http://vouzalis.dk/1024.jpg">
              <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
              <img src="http://vouzalis.dk/1024.jpg" alt="Flowers" style="width:100%;">
            </picture>
            <div class="inner-wrapper bottom-left">
              <div class="header-container">
                <h2 class="light-font">Here is headline 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#" class="btn btn-primary" role="button">Our Services</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </body>
    
    </html>

将现有文字和按钮放在图像上

2 个答案: