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>

希望有帮助！

我将如何仅使该部分的背景图像显示出来？

3 个答案: