没有显示背景图片。 为什么？

Question

我真的被卡住了。 我是CSS的初学者，我尝试使用背景图片。

当我不使用参数no-repeat一切正常，但使用no-repeat ，图像不会显示。 这是尺寸问题吗？

我尝试使用<style></style>但这也不起作用。

任何帮助，不胜感激！

  #bg--service { background-image: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg') no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div> 

Answer 1

您在background-image属性中使用了background速记符号，该符号不起作用。

更改

background-image: url(../img/sternengucker.jpg) no-repeat;

至

background: url(../img/sternengucker.jpg) no-repeat;

或使用两个独立的规则，例如：

background-image: url(../img/sternengucker.jpg);
background-repeat: no-repeat;

Answer 2

background-image仅接受image属性。

如果使用以下命令，它将起作用：

background-image: url('../img/sternengucker.jpg');
background-repeat: no-repeat;

您可以在此处了解有关背景图片属性的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/background-image

您还可以使用背景速记：

background: url('../img/sternengucker.jpg') no-repeat top left;

此链接显示有关背景速记的更多信息：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

Answer 3

采用：

#bg--service {
    background: url(../img/sternengucker.jpg) no-repeat;
}

如果要使用background-image ，请使用以下命令：

#bg--service {
    background-image: url(../img/sternengucker.jpg);
    background-repeat: no-repeat;
}

然后阅读：

文档背景图片

文档背景重复

有关背景和它的属性或整个文档在这里 。

Answer 4

background image和background-repeat是背景属性的子属性，因此要对其进行修复，应将background-image替换为background 。

  #bg--service { background: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg') no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div> 

或者您可以将行分为两个属性

  #bg--service { background-image: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg'); background-repeat: no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div>