代码之家 › 专栏 › 技术社区 › MK-DK

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

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我用bootstrap 3制作了一个横幅,将图片设置为背景图像,因为我想控制图像的大小。 < 768px :

Demosite with banner as a background image in css

链接1 :我选择另一种方法来处理此问题,因此我使用HTML5设置图片 <picture 现在标签:

链接2 : Demosite with banner as image

我的问题是,我需要转换第页的文本和按钮 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>

2 回复 | 直到 7 年前

onyx 7 年前

实现这一目标的一种方法是 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>

ssingh 7 年前

根据我对你问题的理解,你可以尝试一下:

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