覆盖图像与文字

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>