我怎么会做这个图像背景出来的只是部分的一半？

Question

我正在一个网站上，并在特定的部分，我希望有一个蓝色的背景图像出现半段，但不管我在CSS方面做，绝对没有什么作品。

我做了这么多努力，它是举不胜举。我在做什么错了，我该如何解决？

这里是我的html代码：

<div class="row secOne secT">
    <div class="myImage col-md-6"></div>
</div>

这里是我的CSS代码：

.row.secOne.secT {
    padding-top: 20px;
}

.myImage {
   background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

我试着用你的代码创建一个简单的HTML文件，然后通过应用

background-size: 50% 100%;
background-repeat: no-repeat;

在具有所需的图像背景的项目我得到的东西，似乎你想要的结果。

全部的代码示例

<html>
<head>
    <style>
    .col-md-6 {   /* Added this definition in order to get a visible div */
      width: 800px;
      height: 100px;
      border: 1px solid black;
    }
    .row.secOne.secT {
      padding-top: 20px;
    }

    .myImage {
      background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      -webkit-background-size: 50% 100%;
      -moz-background-size: 50% 100%;
      -o-background-size: 50% 100%;;
      background-size: 50% 100%; /* Force background size to only fill half the div */
      background-repeat: no-repeat; /* Avoid background repetitions */
    }
    </style>
</head>
<body>
    <div class="row secOne secT">
        <div class="myImage col-md-6">
          AAAAA
        </div>
    </div>
</body>

Answer 2

我想你可以试试这个：https://i.stack.imgur.com/fdk00.png也试试这个 - https://i.stack.imgur.com/meURR.png

我希望它可以帮助你 - 对不起，如果它没有。

Answer 3

你可以让你的出现URL的蓝色背景，设置高度CSS属性

.row.secOne.secT {
    padding-top: 20px;
}

.myImage {
   background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 22em;
}

<div class="row secOne secT">
    <div class="myImage col-md-6"></div>
</div>

希望能帮助到你！

我怎么会做这个图像背景出来的只是部分的一半？

问题描述投票：0回答：3

3个回答

最新问题

我怎么会做这个图像背景出来的只是部分的一半？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3