2

さて、これが私のコードです：

echo "<span style='float:right; text-align:right; background-image:url('" . $icon_url . "') no-repeat top right; height:86px; width:86px; display:block;'>" . $curr_temp . "<br />" . $curr_cond . "</span>";

これは完璧に機能し、ページの右側に希望どおりの温度と条件が表示されますが、背景画像は機能しません。ソースをChromeで表示すると、次のようになります。

<span style='float:right; text-align:right; background-image:url('http://forecast.weather.gov/images/wtf/medium/sct.png') no-repeat top right; height:86px; width:86px; display:block;'>35&deg;F<br />Fair</span>

これは少なくとも私には正しく見えますが、（Chromeで）要素を検査すると、サイズは31px * 40px、コードは次のように表示されます。

<span style="float:right; text-align:right; background-image:url(" http:="" forecast.weather.gov="" images="" wtf="" medium="" sct.png')="" no-repeat="" top="" right;="" height:86px;="" width:86px;="" display:block;'="">35°F<br>Fair</span>

これは間違いなく間違っています。[要素の検査]ボックスで正しくなるように変更すると、背景画像がきれいに表示されますが、スパンが定義した86 * 86ではなく31x40のままであるため、その一部のみが表示されます。私はここで何を台無しにしていますか？私はそれを理解することができません。

4

6 に答える 6

1

要素の属性は、標準に従って二重引用符で囲む必要があります。また、background url引用符をまったく含めないでください。

試す：

echo '<span style="float:right; text-align:right; background:url(' . $icon_url . ') no-repeat top right; height:86px; width:86px; display:block;">' . $curr_temp . '<br />' . $curr_cond . '</span>';
于 2012-11-06T17:32:35.410 に答える
1

2つの問題があります。1）生成しているコードを見ると、ルールで引用符が適切に使用されていません。2）background-imageセレクターでbackgroundshorthand構文を使用しています。

于 2012-11-06T17:31:02.373 に答える
0

一つには、あなたはbackground代わりに使う必要がありますbackground-image：

echo "<span style='float:right; text-align:right; background:url('" . $icon_url . "') no-repeat top right; height:86px; width:86px; display:block;'>" . $curr_temp . "<br />" . $curr_cond . "</span>";

ただし、唯一の問題は、それだけではURLを台無しにするのに十分ではなく、スタイリングだけであるということです。$ icon_urlがその関数の外でどのように見えるかを調べて、適切な文字列値が生成されるかどうかを確認します。

于 2012-11-06T17:32:36.863 に答える
0

スタイル属性を一重引用符で開きますが、urlinも一重引用符で開きbackground-imageます。事実上、スタイル属性を時期尚早に閉じます。

于 2012-11-06T17:30:20.100 に答える
0

見積もりに問題があるようです。これを試して：

echo '<span style="float:right; text-align:right; background-image:url(\'' . $icon_url . '\') no-repeat top right; height:86px; width:86px; display:block;">' . $curr_temp . '<br />' . $curr_cond . '</span>';

それが役に立てば幸い。幸運を。

于 2012-11-06T17:31:28.583 に答える
0

コードにいくつかの小さなエラーがあります（引用符とテキストの配置）。テキストと画像をどのように表示するかを理解している場合は、次のようにすることができます。

<div style='float: right; text-align:right; 
    background-image:url("http://forecast.weather.gov/images/wtf/medium/sct.png");
    no-repeat top right; height:86px; width:86px; display:block;'>
</div>
<div style='float: right'>
    35&deg;F<br />Fair
</div>

jsfiddle

画像内にテキストが必要な場合は、次を使用できます。

<span style='float:right; text-align:right; 
background-image:url("http://forecast.weather.gov/images/wtf/medium/sct.png"); 
no-repeat top right; height:86px; width:86px; display:block;'>
    35&deg;F<br />Fair
</span>

それがあなたのためにそれを修正することを願っています。

于 2012-11-06T17:52:18.613 に答える