วิธีการสร้าง: ภาพข้อความที่มีข้อความโปร่งแสง

เรียนรู้ว่าจะสร้างภาพข้อความที่มีพื้นหลังที่โปร่งแสง (เฉียงโปร่งแสง) ด้วย CSS。

ภาพข้อความที่สมมติ

Norway
Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

亲自试一试

ฝากลิ่นสร้างภาพข้อความที่สมมติ

ขั้นที่ 1 - เพิ่ม HTML:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

ขั้นที่ 2 - เพิ่ม CSS:

.container {
  position: relative;
  max-width: 800px; /* ความกว้างสูงสุด */
  margin: 0 auto; /* ศูนย์กลาง */
}
.container .content {
  position: absolute; /* ตำแหน่งแบบนิยม */
  bottom: 0; /* ต่ำสุด. ใช้ top:0 ติดตั้งด้านบน */
  background: rgb(0, 0, 0); /* สีดำเปลี่ยนแปลง */
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังสีดำที่มีความเปลี่ยนแปลง 0.5 */
  color: #f1f1f1; /* ข้อความสีเทา */
  width: 100%; /* กว้างทั้งหมด */
  padding: 20px; /* 一些内边距 */
}

亲自试一试