イメージとテキストが重複しないようにする

Question

divに囲まれたスライダがあります。各要素はこのdiv内に配置され、画像はdivの背景として設定されます。左には画像があり、右にはヘッダーとテキストと行動を促すボタンがあります。

イメージをテキストのすぐ左に残したいとします。テキストの幅をさらに小さく設定すると、ページがモバイルで表示されているときに画像がテキストを読むことができなくなります。 HTML & .cssの実装は、この作業を行う最も簡単な方法と考えていますか？

.slide-email-thread { 
 
    background: url("http://4.imimg.com/data4/YP/FD/MY-13642581/hp-laptop-500x500.jpg") no-repeat bottom left; 
 
    background-size: contain; 
 
    height: 500px; 
 
    width: 120%; 
 
    bottom: 8px; 
 
    left: 16px; 
 
} 
 
.email-thread-header{ 
 
    font-family: Arial,Helvetica,sans-serif; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    font-size: 40px; 
 
    width: 95%; 
 
    margin: 0; 
 
    color: #FFFFFF; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 

 
} 
 
.email-thread-text { 
 
    color:#FFFFFF; 
 
    font-size: 15px; 
 
    margin: 0 auto 30px; 
 
    width: 100%; 
 
} 
 
.email-thread-btn-link { 
 
    width: 50%; 
 
} 
 
.email-thread-button { 
 
    
 
} 
 
.email-thread-btn { 
 
    border: 2px solid #FFFFFF !important; 
 
    border-radius: 3px; 
 
    background-color: transparent !important; 
 
    text-decoration: none; 
 
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease; 
 
    font-size: 1.2em; 
 
    color: #FFFFFF !important; 
 
    padding: 1% 1%; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    width: 30%; 
 
} 
 
.email-thread-btn:hover{ 
 
    text-decoration: none; 
 
    color:#F8981D !important; 
 
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease; 
 
    background-color: #FFFFFF !important; 
 
} 
 
.slide-content { 
 
    margin:0px auto; 
 
    width:100%; 
 
    line-height:1.1 
 
    margin-top: -30px; 
 
    font-weight:400; 
 
    margin-bottom:30px; 
 
    width:75%; 
 
    text-align:left; 
 
    padding:20px; 
 
}

<div class="gradient-bg-email-thread slide"> 
 
<div class="slide-email-thread"> 
 
<div class="slide-content"> 
 
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQhhrwa3eP_qIPbSl9jCJe1JrAN7ahuI0IozBVF89fLJH0X7izl" style="padding-top: 20px;"/> 
 
<div class="email-thread-header">Introducing My Site</div> 
 
<div class="email-thread-text">My text is here & it is overlappng.</div> 
 
<div class="email-thread-link"><a class="home_slide-banner email-thread-btn" href="example.com" target="_blank">CHECK IT OUT</a></div> 
 
</div> 
 
</div> 
 
</div>

スライダーは、それのdivスライダー内の背景作りとは対照的に、単にdivの内側に画像を配置する方が良いだろう、div要素でなければなりませんか？

携帯端末で表示されるようにするには、画像に不透明度を追加してテキストを読むことができますか？より簡単なことがここにあるのは確かです。ここ

JSフィドル例：https://jsfiddle.net/b63xwb0z/

Answer 1

私はいくつかの応答スタイリングをお勧めします。あなたのイメージの側面に配置するすべての要素を含むdivに配置し、cssでメディアクエリを使用して、イメージセクションとコンテンツセクションのスタイルを変更します。また、将来の頭痛を避けるために、可能な限りインライン・スタイリングを避けてください。

HTML

<div class="slide-image"> 
    <img src="logo-image.png"/> 
</div> 

<div class="slide-content"> 
    <div class="slider-header"> 
     Introducing My Site 
    </div> 

    <div class="slider-text"> 
     Welcome to the hmpg slider with content in it. 
    </div> 

    <div class="button-link"> 
     <a class="slider-button-cta" href="example.com" target="_blank">LEARN MORE</a> 
    </div> 
</div> 

CSS

.slide-image, 
.slide-content 
{ 
    display: inline-block; 
    width: 100%; 
} 

.slide-image img 
{ 
    padding-top: 20px; 
} 

@media screen and (min-width: 600px) /* I picked 600px arbitrarily */ 
{ 
    .slide-image 
    { 
     width: 14em; /* I picked 14em arbitrarily */ 
    } 

    .slide-content 
    { 
     width: calc(100% - 14em); 
    } 
} 

あなたのスライドの中にこのような何かを試してみてくださいあなたは応答Webデザインhereについて読み始めることができます。

Answer 2

イメージを背景として表示しないようにと主張します。特にイメージを左に表示し、ヘッダー、パラグラフを表示するときは、テキストの下にあるイメージに対してより予防的な対策が必要です。

ベスト/シンプルな方法は、htmlに<img src="" />タグを使用することです。 iphone 6：ここで

は、コードはPC、iphone 6のためのモバイルビュープラス[414pxのmax-デバイス幅]にある[MAX-デバイス幅：375px]：

HTML：

<div class="gradient-bg slide"> 
     <div class="slide-hmpg"> 
      <img src="current-ac-banner.jpg" alt="slide image" class="slide-image" /> <!--ADD YOUR IMAGE HERE --> 
      <div class="slide-containing-content"> 
       <div class="slider-header">Introducing My Site</div> 
       <div class="slider-text">Welcome to the hmpg slider with content in it.</div> 
       <div class="button-link"><a class="slider-button-cta" href="" target="_blank">LEARN MORE</a> 
       </div> 
      </div> 
     </div> 
    </div> 

css

img.slide-image{ /*Added This class for image*/ 
     width:400px; 
     height:auto; 
     float:left; 
     margin-right:20px; 
    } 

    .gradient-bg { /* gradient bg inside of slider, truncated */ 
     background: #F8981D; /* Old browsers */ 
     background: -moz-linear-gradient(top, #F8981D 0%, #B1792A 45%); 
     width:100%; 
     height:660px; 
    } 

    .slider-header{ /* Overlap issue */ 
     font-family: "Arial,Helvetica,sans-serif; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     font-size: 40px; 
     width: 95%; 
     margin: 0;  
    } 
    .slider-text { /* Overlap issue */ 
     font-size: 15px; 
     margin: 0 auto 30px; 
     width: 100%; 
    } 


    .button-link { 
     width: 50%; 
     float:left; /*Added This*/ 
    } 


    .slider-button-cta { /* overlap issue on mobile */ 
     border: 2px solid #000000 !important; 
     border-radius: 3px; 
     background-color: transparent !important; 
     text-decoration: none; 
     font-size: 1.2em; 
     padding: 1% 1%; 
     display: inline-block; 
     margin: 0 auto; 
     width: 30%; 
    } 


    /*FOR IPHONE 6 PLUS */ 
    @media screen and (max-device-width: 414px) and (orientation: portrait){ 
     img.slide-image{ /*Added This class for image*/ 
      width:100%; 
      height:auto; 
      float:center; 
     } 

     .button-link { 
      width:100%; 
      margin-left:10px; 
     } 

     .slider-header, .slider-text{ 
      margin-left:10px; 
     } 
    } 

    /*FOR IPHONE 6 */ 
    @media screen and (max-device-width: 375px) and (orientation: portrait){ 
     .button-link { 
      width:420px; 
      margin-left:10px; 
     } 
    }