背景

Question

我必须为我的Web设计课程重新制作一个页面。我已经完成了其余的工作，但是如何在图像上添加白框并放置文本使其位于框内呢？就像上面说的“冒险”，或者“远足”或“露营”。我应该使用div吗？

基本上，如何使它看起来像这样： Text

    <div class="white_box">
        <img src="img/banner image.png">
        <h2>ADVENTURES OFF THE BEATEN PATH</h2>
        <p>It's time to explore your path. Where will you go?</p>
    </div>

    <h3>POPULAR ARTICLES</h3>
    <div class="red_box"></div>

    <div class="hiking">
        <img src="img/hiking trail image.png" alt="trail" title="trail">
        <h4>HIKING</h4>
        <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
    </div>  

    <div class="camping">
        <img src="img/tent image.png" alt="tent" title="tent">
        <h4>CAMPING</h4>
        <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
    </div>

.white_box {
    width: 430px;
    height: 200px;
}
h2 {
    font-size: 48px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}

h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

Answer 1

尝试此代码。您可以将网格结构用于第二部分。这是您的解决方案。您可以根据需要使用主div的高度和宽度。希望对您有帮助。

CSS：

  .white_box {
    width: 500px;
    height: 500px;
    position: relative;
  }
  .image_div {
    width: 100%;
    height: 100%;
  }
  .image_div img {
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }
  .content_div {
    position: absolute;
    background-color: #fff;
    bottom: 10px;
    left: 30px;
    right: 30px;
    padding: 10px;
  }
  .red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
  }
  p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
  }
  h2 {
    font-size: 30px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
  }
  h3{
    margin-bottom: 0;
  }
  h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
 }

HTML：

  <div class="white_box">
  <div class="image_div">
    <img src="download.jpg">
  </div>
  <div class="content_div">
    <h2>ADVENTURES OFF THE BEATEN PATH</h2>
    <p>It's time to explore your path. Where will you go?</p>
  </div>
</div>

<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>

<div class="hiking">
  <img src="images.jpg" alt="trail" title="trail">
  <h4>HIKING</h4>
  <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
</div>  

<div class="camping">
  <img src="images.jpg" alt="tent" title="tent">
  <h4>CAMPING</h4>
  <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
</div>

Answer 2

我应该使用<div>吗？

是的。通过使用<div>元素，您可以对要使用的所有单个元素（例如，图像，消息框等）进行高度控制。

背景

一种常见的方法是通过<div>属性将CSS与background as 图像一起使用，并带有类似这样的属性以及其他一些控制大小的属性，定位，以及更多：

.pretty-background {
      /* Settings for your image */
      background: url('yourimage.png');
      background-size: cover;
      background-position: center;
      /* Size info */
      height: 400px;
      width: 100%;
      /* Positioning (important as it dictates how child elements will be positioned) */
      position: relative;
}

.pretty-background {
  /* Settings for your image */
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size: cover;
  background-position: center;
  /* Size info */
  height: 400px;
  width: 100%;
  /* Positioning (this is important as it dictates how child elements will be positioned */
  position: relative;
}

<div class='pretty-background'>

</div>

接下来，您需要关注突出框及其定位方式（可以是绝对值也可以是相对值），并在听起来时起作用（例如，此元素从右侧出现x像素，或者此元素在此特定位置出现点）。

内盒

同样，您将为此框添加另一个子元素<div>，该元素的位置将相对于先前背景的左下角：

.standout-box {
      /* Box color */
      background: #FFF;
      /* Size info */
      height: 100px;
      width: 300px;
      /* Spacing from parent */
      margin: 20px;
      padding: 10px;
      /* Positioning (appear 0px from lower left corner, spacing provided by margin) */
      position: absolute;
      left: 0;
      bottom: 0;
}

.pretty-background {
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size: cover;
  background-position: center;
  height: 400px;
  width: 100%;
  position: relative;
}

.standout-box {
  /* Box color */
  background: #FFF;
  /* Size info */
  height: 100px;
  width: 300px;
  /* Spacing from parent */
  margin: 20px;
  padding: 10px;
  /* Positioning (appear 0px from lower left corner, spacing provided by margin) */
  position: absolute;
  left: 0;
  bottom: 0;
}

<div class='pretty-background'>
  <div class='standout-box'>
    <b>This is a test</b>
    <p>
      Here is some more content
    </p>
  </div>
</div>

就是这样！实际上，这两个<div>元素可以协同工作：

<div class='pretty-background'>
  <div class='standout-box'>
    <b>This is a test</b>
    <p>
      Here is some more content
    </p>
  </div>
</div>

这时，您应该有一个合理的起点来调整位置，盒子的尺寸等。

Answer 3

尝试此代码：

.white_box {
   background-image: url(your image path);
   height: 65vh;
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; 
}
.white_box_text{
	padding: 15px;
	width: 350px;
	background-color: #fff;
	position: absolute;
	bottom: 25px;
	left: 25px;
}
h3{
	margin-top: 20px;
	font-size: 40px;
	margin-left: 10px;
}
h2 {
    font-size: 42px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}
h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

<!DOCTYPE HTML>
<html>
  <head>
     <link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
  <body>
   <div class="white_box">
    <div class="white_box_text">
        <h2>ADVENTURES OFF THE BEATEN PATH</h2>
        <p>It's time to explore your path. Where will you go?</p>
    </div>
  </div>
   <h3>POPULAR ARTICLES</h3>
    <div class="red_box"></div>   
  </body>
</html>

如何在这样的图像上方放置文本？

3 个答案:

背景

内盒