0

特定の領域 (画面の真ん中) 内にテキストを配置したいのですが、ペイントで独自の背景画像を作成し、その中に段落 (引用) を配置したいと考えています。しかし、どう頑張っても私のハンドメイドの背景には合いません。コードは次のとおりです。

<!DOCTYPE html>
<html lang='cs'>
  <head>     
   <style>
   body {
   margin:0;
   background-image: url('pozadi.png');
   background-repeat: no-repeat; 
}
.p {
    font-size: 20px;
    position: relative;
}  

h1 {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #7092be;
}

li {
  float: left;
}
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
}
.active {
  background-color: #bdcce1;

}
</style>

    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>

  </head>
    <body>

        <h1> Vtipy na den</h1>

    <ul>
  <li><a class="active" href="index.html">Domov</a></li>
  <li><a href="ctyri.html">Najdu co neznám</a></li>
  <li><a href="obrazky.html">Obrázky</a></li>
  <li><a href="videjko.html">Video vtip</a></li>
  <li><a href="tabulky.html">Tabulky</a></li>
</ul>

        <p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”&lt;/p>


</body>
</html>

これが私がどのように見せたいかです。まだまだ初心者なのでよろしくお願いします！

https://i.stack.imgur.com/MBTjV.png

4

2 に答える 2

0 

   body {
   margin:0;
   background-image: url('pozadi.png');
   background-repeat: no-repeat; 
}
.p {
    font-size: 20px;
    position: relative;
}  

h1 {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #7092be;
}

li {
  float: left;
}
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
}
.active {
  background-color: #bdcce1;

}
.mw1200{max-width:600px;margin:0 auto;}
.fw{width:100%;float:left;background:#fff;}
.paragraphbg{background:url(https://i.ibb.co/rZB3jCZ/star.png);}
.paragraphbg p{padding:10px 10%;font-size:28px;text-align:left;}
        <h1> Vtipy na den</h1>

    <ul>
  <li><a class="active" href="index.html">Domov</a></li>
  <li><a href="ctyri.html">Najdu co neznám</a></li>
  <li><a href="obrazky.html">Obrázky</a></li>
  <li><a href="videjko.html">Video vtip</a></li>
  <li><a href="tabulky.html">Tabulky</a></li>
</ul>

<div class="fw paragraphbg">
<div class="mw1200">
<div class="fw">
        <p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”&lt;/p>
</div>
</div>
</div>

于 2020-03-18T01:40:10.000 に答える