Question

我对CSS很陌生，但我在插画家（网页）中制作了一些内容，并希望将其作为背景图像放在CSS中。我已将图片放在<div>和CSS中，我只是放background-image: url(berg.jpg)，我确定网址是正确的，但它没有显示任何内容。之后我已将height: 100%放入css中并显示，但它全部放大并且因为缩放而仅显示图片的一个小角落。如何正确显示？图像大小为宽：1366px;高度：768px

很抱歉，如果已经提出这个问题，但我似乎无法找到它。 Thx提前。

Answer 1

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

Answer 2

您的图片显示为完整尺寸。如果将background-size属性添加到css，则可以定义大小。

请参阅此链接了解所有background-size选项： 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/

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

2 个答案: