Question

我知道这里曾多次问过这个问题，但对我没有任何帮助。我正在为Codecademy练习中的一个做我的第一个独立首页，但我现在还不太流利的编码。也许我错过了一些东西，所以我将代码粘贴在这里。

body, html {
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    margin-top: 2%;
}

img {
     
   width: 100%;
   height: 120px;
   object-fit: cover;
   position: relative;
   
}

 h2 {

  font-family: Helvetica, sans-serif;
   font-size: 100px;
   font-weight: bold;
   color: khaki;
   position: absolute;
 
}

<!DOCTYPE html>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="banner">
<img class="background" alt="banner_html" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg">
<div class="companys_name">
<h2>Dasmoto's Arts & Crafts</h2>
</div>
</div>
</body>

Answer 1

您可以将图像设置为横幅类的背景：

<!DOCTYPE html>
<html>

<head>
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <style>
        body,
        html {
            margin-left: 0.5%;
            margin-right: 0.5%;
            margin-bottom: 0.5%;
            margin-top: 2%;
        }
        
        .banner {
            background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg);
            object-fit: cover;
            position: relative;
            height: 120px;
        }

        h2 {
            font-family: Helvetica, sans-serif;
            font-size: 50px;
            font-weight: bold;
            color: khaki;
            position: absolute;
        }

    </style>
</head>

<body>
    <div class="banner">
        <div class="companys_name">
            <h2>Dasmoto's Arts & Crafts</h2>
        </div>
    </div>
</body>

Answer 2

您可以通过将绝对位置和z-index设置为较高的位置来在图像中插入文本。这样您就可以在图片上方显示文字

或者您可以在文本容器中将图像设置为背景

<div style='background-image: url("imageUrl");'>
   <h2>Dasmoto's Arts & Crafts</h2>
</div>

<!DOCTYPE html>
<html>
  <head>
  <title>Dasmoto's Arts & Crafts</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="banner">
      <div style="position:absolute; top: 50%; left: 50%; z-index:100">
        <h2>Dasmoto's Arts & Crafts</h2>
      </div>
    <img class="background" alt="di" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg">
    <div class="companys_name">
    <h2>Dasmoto's Arts & Crafts</h2>
    </div>
  </div>
</body>

向图像横幅添加文本

2 个答案: