Question

不重复也不起作用。

    .learning-outer-div
    {
    width:100%;
    height:600px; 
    max-height:100%; 
    background-image: url(https://via.placeholder.com/150);
    background-size: 104% auto;
    }

    <div class="learning-outer-div"></div>

Answer 1

background-image没有使用no-repeat选项。

您需要background

background: url(../images/banner.jpg) no-repeat;

或

background-repeat: no-repeat

Answer 2

首先，您需要在网址周围加上引号。然后使用background代替background-image，因为这是简写。

以下代码在水平和垂直方向上将背景图像居中。 background-size指定图像的大小应填充（始终填充背景）。

background: url("https://via.placeholder.com/150") no-repeat center center;
background-size: cover; /* size to fill */

Answer 3

.learning-outer-div
{
width:100%;
height:600px; 
max-height:100%; 
background-image: url(../images/banner.jpg) no-repeat;
background-size: 104% auto;
}

您可以试试吗？多数民众赞成...

如何停止重复图像

3 个答案: