沒有顯示背景圖片。 為什么？

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>