Question

好的，所以这是我的代码：

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我将其定义为。我搞砸了什么？我只是想不出来。

Answer 1

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

Answer 2

根据标准，元素属性应该用双引号括起来。此外，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>';

Answer 3

您使用单引号打开样式属性，但也使用单引号打开url中的background-image。实际上，过早关闭你的样式属性。

Answer 4

您的报价似乎有问题。试试这个：

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

希望它有所帮助。祝你好运。

Answer 5

首先，您需要使用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>";

然而，唯一的问题是，它本身不应该足以搞砸网址，只是造型。我会看看你的$ icon_url如何在该函数之外查看它是否生成了正确的字符串值。

Answer 6

您的代码中存在一些小错误（引号和文本的位置）。如果我理解您希望如何显示文本和图像，可以这样做：

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

希望能为您修复它。

无法<span>后台工作</span>

6 个答案: