我想要一个带有标题的图像

Question

<style>

.dazzlebox{
background-image: url("img/g954.png"); 
width:30%;
margin-top:-220px;
margin-left:650px;
color:#FFFFFF;
}

我想要像这样的观点，enter image description here

.dazzlebox h1{
margin-top:100px;
margin-left:70px;
}


</style>

<div class="dazzlebox" >        
          <h1>WHY YOU SHOULD GET A DAZZLE  <span class="duzzale-box" style="font-family:Coneria Script Demo" >Box</span> </h1>

                             <img src="./img/g1158.png" style="width:20px; padding-left:170px; display:inline-block;">

我想用“Box”这个词来填充“心脏”图像。当我给出填充或边距时，它随着标题移动。

                 </div>

Answer 1

这有帮助吗？您提供的链接已损坏

在整个页面中查看：

#main_container {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100vw;
  display: block;
  justify-content: center;
  align-items: center;
  align-self: center;
  font-family: Coneria Script Demo;
}

h1,
span {
  font-weight: bolder;
  text-align: center;
  font-size: 3em;
}

#container {
  text-align: center;
  height: 83%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="main_container">
  <h1>WHY YOU SHOULD GET A DAZZLE</h1>
  <div id="container"><span>BOX</span></div>
</div>