背景图片显示错误，不知道怎么办

Question

我是 CSS 的新手，但我在 illustrator (web) 中做了一些东西，想把它作为背景图像放在 css 中。我把图像放在 <div> 和 CSS 中我只是把 background-image: url(berg.jpg)，我确定 url 是正确的，但它不显示任何东西。在那之后我把 height: 100% 放在 css 中，它出现了，但是它被放大了，并且由于缩放只显示了图片的一个小角。我怎样才能正确显示这个？图片大小为width: 1366px； height:768px.

抱歉，如果有人问过这个问题，但我似乎找不到。谢谢提前。

Answer 1

您可以尝试将 bakcground-size: cover; 放入 CSS 代码中，这将占用 div 的所有背景，与宽度或高度无关。

Answer 2

您的图片显示为全尺寸。如果将背景大小属性添加到 css，则可以定义大小。

有关所有 background-size 选项，请参阅此 link： https://www.w3schools.com/cssref/css3_pr_background-size.asp

您还可以定义 background-position 使图像居中等。 https://www.w3schools.com/cssref/pr_background-position.asp

CSS 例子

    #problem-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
    }

    #correct-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
      background-size: cover;
      background-position: center center;
    }

有关完整的工作示例，请参阅 jsfiddle： https://jsfiddle.net/3o8b2e4s/

背景图片显示错误，不知道怎么办

Background image displays wrong, don't know what to do

html

css

background-image