レスポンシブイメージにセカンダリテキストを追加

Question

私はかなり新しくコーディングしています。私はこれを得ることができるすべての助けに感謝します。

メインヘッダーのすぐ下に背景画像の上にセカンダリテキストを追加する方法もありますか？

私は、h2ヘッダーとは違ってテキストのスタイルを設定したいと思います。

私はこれを行うにはいくつかの方法を試しましたが、どれもうまくいきませんでした。新しいテキスト:-(ちょうどモバイルモードではなく、ヘッダーの下に積み重ね重なってしまう。誰かが私には欠けているものを見るために、このコードを見てみることができれば

が助けに感謝。

.homepagetext:after { 
 
content:""; 
 
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 8%,rgba(50,50,50,0.1) 56%,rgba(161,161,161,0) 66%,rgba(255,255,255,0) 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1); /* old IE fallback */ 
 
    width: 200%; 
 
    height: 400%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 2; 
 
} 
 

 

 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow:hidden; 
 
    background-image: url(https://globalonline.blob.core.windows.net/globalonlinecourses/Bannerz_1205.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-attachment: fixed; 
 
    /* https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SRU39R3XRV.jpg */ 
 
    background-size: cover; /* version standardisée */ 
 
} 
 

 

 
h2 { 
 
    font-family: 'karbon'; 
 
    font-weight: normal; 
 
    font-size: 40px; 
 
    color: white; 
 
    padding: 25px; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 15%; 
 
    transform: translate(-50%, -50%); 
 
    border: 0px solid white; 
 
}

<div> 
 
    <h2 class="homepagetext">Introduction to <BR><em>GEORGRAPHIC INFORMATION SYSTEMS</em></h2> 
 
</div> 
 

 

 
    
 
    
 

 

 
    
 
    
 

Answer 1

私はいくつかのことが歩道を離れて投げていると信じています。絶対

位置は、画像の上にテキストを置くための素晴らしいですが、あなたのイメージが背景であるので、あなたはgのスタイルにそれを必要としません背景画像の上に現れるテキスト。

削除：

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 

.homepagetext:after { 
 
content:""; 
 
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 8%,rgba(50,50,50,0.1) 56%,rgba(161,161,161,0) 66%,rgba(255,255,255,0) 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1); /* old IE fallback */ 
 
    width: 200%; 
 
    height: 400%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 2; 
 
} 
 

 

 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow:hidden; 
 
    background-image: url(https://globalonline.blob.core.windows.net/globalonlinecourses/Bannerz_1205.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-attachment: fixed; 
 
    /* https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SRU39R3XRV.jpg */ 
 
    background-size: cover; /* version standardisée */ 
 
} 
 

 

 
h2 { 
 
    font-family: 'karbon'; 
 
    font-weight: normal; 
 
    font-size: 40px; 
 
    color: white; 
 
    padding: 25px 25px 0 25px; 
 
    margin:0; 
 
    position: static; 
 
    border: 0px solid white; 
 
} 
 
.new-class{ 
 
    color:#bada55; 
 
    padding:0 25px; 
 
    margin:0; 
 
}

<div> 
 
    <h2 class="homepagetext">Introduction to <BR><em>GEORGRAPHIC INFORMATION SYSTEMS</em></h2> 
 
    <p class="new-class">secondary text</p> 
 
</div>