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>

这绝对是不正确的。如果我在检查元素框中将其更改为正确,它会很好地显示背景图像,但仍然只有其中的一部分,因为跨度保持在 31x40 而不是我定义的 86*86。我在这里搞砸什么?我就是想不通。

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

我看到两个问题。1)当您查看生成的代码时,您没有正确使用规则中的引号。2)您正在使用带有背景图像选择器的背景速记语法。

于 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

您的代码中有一些小错误(引号和文本位置)。如果我了解您希望如何显示文本和图像,则可以这样做:

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