Question

我有一个CSS网格，我需要在图像上放置一些文本。下面显示的是我在图片上没有文字的代码。

.sbp-item12 {
        grid-row: 6 / 7;
        grid-column: 9/13;
        height: 250px;
    }

<div class="sbp-item12">
    <a href="#">
       <h3>Here is a headline</h3>
       <figure>
          <img src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

我尝试将以下内容添加到代码中，但是文本进入页面的底部，并且不停留在网格项内。有人知道我如何在网格项目中的图像上放置文本吗？

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 9/13;
    height: 250px;
}

.bottom-left {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="sbp-item12">
    <a href="#">
        <div class="text-bottm-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

Answer 1

尝试一下：

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

div.img-post {
  position: relative;
}

h3.img-title { 
  position: absolute;
  z-index: 1;
  left:175px; 
}

img.img-body { 
  position: absolute
}

<div class="sbp-item12 img-post">
    <a href="#">
       <h3 class="img-title">Here is a headline</h3>
       <figure>
          <img class="img-body" src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

Answer 2

您需要设置父项position:relative并为position:absolute设置div，您要放置在bottom-left上。
注意：您的Html和css类不匹配。您需要更正它们。以下是有效的代码段

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

figure {
  margin: 0;
  position: relative
}

.bottom-left h3{
  z-index: 100;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  margin:0
}

<div class="sbp-item12">
  <a href="#">
    <figure>
      <img src="https://placehold.it/380x250">
      <div class="bottom-left">
        <h3>Here is a headline</h3>
      </div>
    </figure>
  </a>
</div>

Answer 3

尝试一下：

└── src
    └── main
        └── java
            └── hello

* {
  margin: 0;
  padding: 0;
}

.bottom-left {
  /* Insert your text styling here*/
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.sbp-item12 {
  position: relative;
  display: inline-block;
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

.sbp-item12 .bottom-left {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  /* If text should be centered: */
  /* text-align: center; */
}

Answer 4

您只是在代码中犯了错误，请更改此class="text-bottm-left"并将其添加到class="bottom-left"，希望它能起作用。

<div class="sbp-item12">
    <a href="#">
        <div class="bottom-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

Answer 5

您需要使用echo ATZ > /dev/ttyX将父div设置在相对位置，然后在使用// This writes, but reads only zeros ((( package main import ( "github.com/jacobsa/go-serial/serial" "io" "log" "time" "fmt" ) func Sleep(duration int) { time.Sleep(time.Second * time.Duration(duration)) } func printBuf(b []byte){ for _, val:=range b { fmt.Printf("%x ", val) } } func main(){ options := serial.OpenOptions{ PortName: "/dev/ttyX", BaudRate: 115200, DataBits: 8, StopBits: 1, MinimumReadSize: 0, InterCharacterTimeout: 50, } port, err := serial.Open(options) if err != nil { log.Printf("port.Read: %v", err) return } // Make sure to close it later. defer port.Close() var s string = `AT+CSQ` b:=[]byte(s) n, err := port.Write(b) if err != nil { log.Printf("port.Write: %v", err) } log.Println("Written bytes: ", n) //Sleep(1) res := make([]byte, 64) n, err = port.Read(res) if err != nil && err != io.EOF { log.Printf("port.Read: %v", err) } log.Println("READ bytes: ", n) printBuf(res) } /* I expect (for example): --------- ATZ OK AT+CSQ +CSQ 22.4 */将文本设置为绝对位置之后。

您可以使用其他CSS属性（如左，右，上，下）在任意位置设置测试。

在图像上的CSS网格中放置文本

5 个答案: