Question

对于所有的剪辑，您会认为我会发现这很简单。每次用户提出新的业务线时＃34;必须创建一个新图像并以编程方式显示。我认为最有效的方法是拥有一个背景图像，并且通过逻辑将文本过度分配。我只是不够熟练才能完成这项任务。

<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>

更新：

这就是我最终的结果。谢谢！

    <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时会发生什么），但这些都是你可以一次解决的小问题。这是我偶尔使用的解决方案。

另一种可能的解决方案是将图像背后的图像绝对定位，或者将图像放在图像上（并确定您应该选择哪种取决于您的具体需求）。

更新：

＆＃13;

$(document).ready(function(){
	$('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
    });
});

＆＃13;

#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')}

＆＃13;

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

＆＃13;

覆盖图像与文本

1 个答案: