2016-07-29 56 views
0

我试图在WordPress中使用的背景链接CSS属性选择器的图像显示它的页面http://launique.co.uk/services-float/背景属性(CSS)不工作,图像不显示

上首先我使用默认的图像和链接进入链接到默认的图像,这是我已经上传到媒体库:

background: url(http://launique.co.uk/wp-content/uploads/2016/07/fold.gif) no-repeat 0 0;

这没有奏效。

然后经过一番研究,我在cPanel的子主题文件夹中创建了一个单独的“images”文件夹。

background: url(images/fold.gif) no-repeat 0 0;

但依然无果......

这是整个就像代码:

.page-services h1::after { 
content: ''; 
display: block; 
height: 40px; 
width: 40px; 
background: url(images/fold.gif) no-repeat 0 0; 
} 
+0

什么是0 0? – RamenChef

+0

我通过检查元素对其进行测试后编辑了我的答案。 http://stackoverflow.com/a/38668570/4298604 –

回答

0

我检查您的网站的HTML代码,我没找到父元素div.page-services中的H1子元素。因此你的CSS规则将不起作用。但是,有一个H3子元素。当我将调试器中的代码更改为.page-services h3 :: {...}后出现图像时。

+0

这是不正确的。该规范不需要报价。请参阅:http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – rnevius

+0

您好,欣赏尝试,但使用引号没有什么差别。任何其他想法? – Saqib

+0

**是!!! **就是这样,你是@Jon Wilson的男人!非常感谢你! – Saqib

0

更新:这应该肯定工作。

.page-services { 
    display: block; 
    position: relative; 
} 
.page-services h3::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 40px; 
    width: 40px; 
    background: url('http://launique.co.uk/wp-content/uploads/2016/07/fold.gif') no-repeat; 
} 
+0

谢谢@Steve Ventimigilia,将标题标签从H1更改为H3。 – Saqib

+0

您可以随时通过右键单击页面并选择检查元素来测试这种类型的东西。然后,通过右键单击HTML并选择“以HTML编辑”,您可以随时将其用作临时沙箱(刷新浏览器后更改将消失)。添加标签有其中的CSS会给你实验的自由,而不会意外地在文件中保存太多的变化(也就是'膨胀')。我主要使用Firefox(这是一种介于中性交叉兼容性的中间浏览器),而你只需右键单击并键入“Q”即可。 –

+0

欣赏提示@Steve Ventimigilia我会记下它。 – Saqib