防止圖像和文字重疊

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

你可以開始閱讀有關響應的網頁設計here。

Answer 2

我堅持你不要把圖像作爲背景特別是當你在左邊顯示圖像和顯示標題時，右邊的段落，因爲你需要更多的圖像預防措施不去文本下。

最好/最簡單的方法是在html中使用<img src="" />標記。

這裏是與PC的代碼，iphone 6加[MAX-設備寬度：414px]移動視圖和iphone 6 [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; 
     } 
    }