我想使图像适合标题

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

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

全页查看：

[Tue Sep 18 13:05:03.193782 2018] [cgid:error] [pid 5448:tid 140225640793920] (13)Permission denied: AH01241: exec of '/opt/apache2/cgi-bin/session/documentReady.py' failed 

[Tue Sep 18 13:05:03.197226 2018] [cgid:error] [pid 3795:tid 140225544058624] [client 127.0.0.1:47900] End of script output before headers: documentReady.py, referer: http://localhost:8050/login.html 

#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;
}