Оверлейное изображение с текстом

Question

Со всеми снобиками вы бы подумали, что я нахожу это простым в использовании. Каждый раз, когда пользователи придумывают новую «линию бизнеса», новое изображение должно быть создано и программно отображаться. Думаю, что лучше всего будет иметь фоновое изображение и чрезмерно это с текстом по логике. Я просто недостаточно разбираюсь, чтобы сделать это.

<cfif board_type eq "Elite"> 
      <img src="images/jobboard_elite_sm.gif" border="0"> 
     <cfelseif board_type eq "Custom"> 
      <img src="images/jobboard_thc_sm.gif" border="0"> 
     <cfelseif board_type eq "Basic"> 
      <img src="images/jobboard_basic_sm.gif" border="0"> 
     <cfelseif board_type eq "Intern"> 
      <img src="images/jobboard_newentry_sm.gif" border="0"> 
     <cfelseif board_type eq "Premium"> 
      <img src="images/jobboard_premium_sm.gif" border="0"> 
     </cfif> 

UPDATE:

Это то, что я закончил с. Спасибо!

<cfinvoke component="control.jobads.cfc.basic" method="getJobTypeByType" type="#attributes.board_type#" returnvariable="typeInfo"> 
    <style> 
     #BoardIcon { 
     position:relative; 
     background-position:center; 
     background-repeat:no-repeat; 
     /*customizeable values*/ 
     background-image:url('images/jobboard_blank_icon_sm.gif'); 
     /*based on your particular use case, I'm guessing you won't ever want to change the width/height of the div, so you can probably just leave those set in the main styles declaration for this div and exclusively swap out the background*/ 
     width:200px; 
     height:40px; 
    } 
    #BoardIcon p { 
     /*centers text in div and vertically aligns it to the bottom*/ 
     position:absolute; 
     bottom:5; 
     left:0; 
     right:0; 
     text-align:center; 
     /*some styles I set so the text would stand out*/ 
     color:white; 
     font-weight:bold; 
     font-size:24px; 
    } 
    </style> 

    <script> 
     $(document).ready(function(){ 
      $('#BoardTypeText').html(<cfoutput>'#attributes.board_type#'</cfoutput>);//sets the text of the paragraph to the option value) 
     }); 
    </script> 
    <table> 
     <tr> 
      <td> 
       <div id="BoardIcon"> 
        <p id="BoardTypeText"> 
        </p> 
       </div> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="ModifySurveyHeaderFooterButton" type="button" value="Modify Survey Email Header/Footer"> 
      </td> 
      <td> 
        <table> 
         <tr><td align="center"> 
           Change Boards: 
          </td></tr> 
         <tr> 
          <td> 
           <cfparam name ="change_board_type" default="custom"> 
           <cfform name="boardchangeform" id="boardchangeform" action="index.cfm?fa=home&board_type=#change_board_type#"> 
           <cfselect name="change_board_type" query="boardTypes" value="ad_type" display="description" selected="#attributes.board_type#" queryposition="below" onchange="submitchangeboardtype(this.value);"> 
            <!--- <option value=""></option> ---> 
           </cfselect> 
      <script language="javascript"> 
       function Submitchangeboardtype(theSelectValue){       $("body").css("cursor","progress");         $('#BoardTypeText').html(theSelectValue);//sets the text of the paragraph to the option value) 
              document.boardchangeform.action='index.cfm?fa=home&board_type=' + theSelectValue; 
    document.boardchangeform.submit(); 
              return True; 
             } 
            </script> 

           </cfform> 
          </td> 
         </tr> 
        </table> 
       </td> 
     </tr> 

Answer 1

Вы можете установить изображение в качестве фонового изображения на контейнер, содержащий текст:

<div class="bg-img elite"> 
    <p>Elite Image Text</p> 
</div> 
<div class="bg-img thc"> 
    <p>THC Image Text</p> 
</div> 

<style> 
    div.elite { 
    background-image:url(elite.gif); 
    width:***THIS IMAGE WIDTH***px; 
    height:**THIS IMAGE HEIGHT**px; 
    } 
    div.thc { 
    background-image:url(thc.gif); 
    width:***THIS IMAGE WIDTH***px; 
    height:**THIS IMAGE HEIGHT**px; 
    } 
</style> 

Так что это сделает ваш текст появится (с текстом по умолчанию стилей) в верхней левой части div, а div отобразит ваше изображение в качестве фона без обрезки или буксования. Если вы хотите переместить текст в нижнюю часть, вы можете добавить position:relative к стилям для этих div и div.bg-img p {position:absolute;bottom:0;}, а нижняя часть вашего тега P выстроится в линию с нижней частью div. Это решение имеет недостатки, так как вам, возможно, придется столкнуться с вопросами о том, что происходит с текстом, если текст занимает больше места, чем изображение. Есть еще несколько потенциальных проблем (например, что происходит, когда окно меньше, чем div), но это все небольшие проблемы, которые вы можете решить по одному. Это решение, которое я иногда использую.

Другим потенциальным решением является абсолютное позиционирование изображения позади текста или текста над изображением (и выяснение того, что вы должны выбрать, будет зависеть от ваших конкретных потребностей).

UPDATE:

$(document).ready(function(){ 
 
\t $('select').on('change',function(){ 
 
     $('div#results').removeClass()//removes all classes 
 
      .addClass($(this).val())//gives the div a class corresponding to the selected value 
 
      .find('p').html('The current class is '+$(this).val());//sets the text of the paragraph to the option value 
 
    }); 
 
});

#results { 
 
    position:relative; 
 
    background-position:center; 
 
    background-repeat:no-repeat; 
 
    /*customizable values*/ 
 
    background-color:yellow; 
 
    /*based on your particular use case, I'm guessing you won't ever want to change the width/height of the div, so you can probably just leave those set in the main styles declaration for this div and exclusively swap out the background*/ 
 
    width:200px; 
 
    height:200px; 
 
} 
 
#results p { 
 
    /*centers text in div and vertically aligns it to the bottom*/ 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    text-align:center; 
 
    /*some styles I set so the text would stand out*/ 
 
    color:red; 
 
    font-weight:bold; 
 
    font-size:16px; 
 
} 
 
#results.Elite {background-image:url('http://lorempixel.com/g/200/280')} 
 
#results.Custom {background-image:url('http://lorempixel.com/g/200/310')} 
 
#results.Basic {background-image:url('http://lorempixel.com/g/200/340')} 
 
#results.Standard {background-image:url('http://lorempixel.com/g/200/370')} 
 
#results.Premium {background-image:url('http://lorempixel.com/g/200/400')}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="change_board_type" > 
 
\t <option value="Elite">Elite</option> 
 
\t <option value="Custom">Custom</option> 
 
\t <option value="Basic">Basic</option> 
 
\t <option value="Standard">Standard</option> 
 
\t <option value="Premium">Premium</option> 
 
</select> 
 
<div id="results"><p>Change select box to see the div and text change</p></div>