画像のサイズを大きくしないでテキストを移動する方法

Question

テキストが中央の段落と一番上にあるように、移動を試みましたが、余白を追加するたびにサイズが大きくなります背景画像。私は他のプロパティを使用する場合、それはテキストを移動しません、助けてください、ありがとう！

* { 
 
    box-sizing: border-box; 
 
    } 
 

 
    body { 
 
    margin: 0; 
 
    text-align: center; 
 
    font-family: Elephant, sans-serif; 
 
    } 
 

 
img { 
 
    max-width: 100%; 
 
    } 
 

 
    a { 
 
    text-decoration: none; 
 
    } 
 
    
 
    
 
    
 
    /* ====== About ====== */ 
 

 
#about { 
 
    max-width: 100%; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-image: url(https://i.imgur.com/zpwqaEG.jpg); 
 
    padding: 350px 0; 
 
} 
 

 
    .aboutHead { 
 
    display: inline-block; 
 
    font-size: 64px; 
 
    font-style: italic; 
 
    color: #fff; 
 
    border-bottom: 2px solid #993b3b; 
 

 

 
    }

<section id="about"> 
 
     <h1 class="aboutHead">Our Focus</h1> 
 
     <p class="about1"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
     <p class="about2"> 
 
      Nullam ultrices euismod suscipit. Integer vitae massa quam. 
 
      Maecenas tristique vitae mi sit amet rutrum. 
 
      Etiam fringilla justo vitae felis tempus volutpat. 
 
      Phasellus urna ante, porttitor iaculis mattis id, suscipit ul 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
    </section>

Answer 1

これを試してみてください。

<section id="about"> 
     <h1 class="aboutHead">Our Focus</h1> 
    <div class="cdesc"> 
     <p class="about1"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     <p class="about2"> 
      Nullam ultrices euismod suscipit. Integer vitae massa quam. 
      Maecenas tristique vitae mi sit amet rutrum. 
      Etiam fringilla justo vitae felis tempus volutpat. 
      Phasellus urna ante, porttitor iaculis mattis id, suscipit ul 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
    </div> 
    </section> 

スタイルシート

* { 
    box-sizing: border-box; 
    } 

    body { 
    margin: 0; 
    font-family: Elephant, sans-serif; 
    } 

img { 
    max-width: 100%; 
    } 

    a { 
    text-decoration: none; 
    } 

.cdesc { 
    padding:350px 0; 
} 

    /* ====== About ====== */ 
.about1 { 

} 

#about { 
    text-align:center; 
    max-width: 100%; 
    background-size: cover; 
    background-position: center; 
    background-image: url(https://i.imgur.com/zpwqaEG.jpg); 
} 

    .aboutHead { 
    position:relative; 
    top:0px; 
    font-size: 64px; 
    font-style: italic; 
    color: #fff; 
    border-bottom: 2px solid #993b3b; 

Answer 2

あなたは、CSSのFlexを使用してみましたか？私の単純なフレックスボックスのコードは、一番上の太字を上にし、段落を中心にしていますか？

.img-div { 

    display: flex; 
    flex-direction: column; 
    align-items: center; 
    ... 

} 

.paragraph-div { 

    margin: auto 

} 

マイcodepen

https://codepen.io/ShadowLegend/pen/eeYQrg

Answer 3

また、このソリューションを試すことができます。 pragraphの絶対配置ラッパーを追加して、セクションの中央で右揃えにしました。それを確認してください。おそらくこのソリューションはあなたのニーズに合っています。

ブラウザのサイズを小さくすると、絶対配置されたラッパーがページ上の他の要素と重なる可能性があるため、これはあまり統合された解決策ではありません。

.paragraphs { 
    position: absolute; 
    top: 50%; 
    transform: translatey(-50%); 
} 

DEMO Codepen