好的,这是我的代码:
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°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。我在这里搞砸了什么?我就是想不通。
最佳答案
根据标准,元素属性应该用双引号引起来。此外,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>';
关于html - 无法让 <span> 背景工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13256192/