调整窗口大小时，背景色使幻影边框出现

时间：2018-06-21 14:47:33

标签： css css3 google-chrome

我正在设计一个展示带有信息的汽车的积木，特别是对于这个问题，我只保留了重要的东西，即默认背景（图像）：

Car background

问题出在背景色上，它随示例-视图中的 red 中接收到的颜色而变化。直到我调整窗口大小（使用 Toggle设备工具栏）或在最终设备中对其进行测试（1920x1080）之前，一切都像魅力一样。如果进行此更改，将会看到幻影边框：

Magic borders

我尝试添加box-shadow属性，并且在某些分辨率下结果是相同的：

box-shadow: inset -3px -3px 0px 8px rgb(255, 255, 255);
-webkit-box-shadow: inset -3px -3px 0px 8px #fff;
-moz-box-shadow: inset -3px -3px 0px 8px #fff;
box-shadow: inset -3px -3px 0px 8px #fff;**

我正在使用：

  • 谷歌浏览器
  • 具有1920x1080分辨率的Android，三星设备
  • 如果没有边界，只需调整窗口大小即可出现。

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') no-repeat;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
  /*     box-shadow: inset -3px -3px 0px 8px rgb(255, 255, 255); */
  /*    -webkit-box-shadow: inset -3px -3px 0px 8px #fff;  Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  /*    -moz-box-shadow: inset -3px -3px 0px 8px #fff;  Firefox 3.5 - 3.6 */
  /*    box-shadow: inset -3px -3px 0px 8px #fff; */
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="background-color: red"></div>
            <div class="listitem-content">
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

在此处完成JSFiddle（更新25/6）：https://jsfiddle.net/1uod0ptb/19/

2 个答案:

答案 0 :(得分：1)

我的最后一个想法是使用::before和::after伪元素以及一个CSS变量…
使用这种可变颜色的::before的位置允许其周围留有一些空间：

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  position: relative; /* ADDED THIS */
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg { /* Modified a little here */
  position: relative;
  height: 105px;
  width: 287px;
  border-right: 1px solid #e5e5e5;
  opacity: 0.6;
}

.listitem-bg::before { /* Added all this */
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background-color: var(--bg-color); /* Using CSS var here */
  content: "";
}

.listitem-bg::after { /* Added all this */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('https://i.imgur.com/FsTDxBK.png');
  content: "";
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="--bg-color: red;"></div><!-- Using CSS var here -->
            <div class="listitem-content">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

⋅ ⋅ ⋅

在我看来，您正在使用position: absolute;且没有任何position: relative元素。
即使不能解决您的问题，也应该使用它！

请告诉我使用该代码会发生什么情况

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  position: relative; /* ADDED THIS */
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg { /* Modified a little here */
  position: absolute;
  height: 105px;
  width: 287px;
  border-right: 1px solid #e5e5e5;
  background-image: url('https://i.imgur.com/FsTDxBK.png');
  opacity: 0.6;
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="background-color: red"></div>
            <div class="listitem-content">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

⋅ ⋅ ⋅

我尝试使用background-size: 101% 101%;稍微放大图像。
我还添加了background-position: center center和background-origin: border-box。
所有这些都可以在排序手background中使用：

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') center center / 101% 101% no-repeat border-box;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="background-color: red"></div>
            <div class="listitem-content">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

⋅ ⋅ ⋅

我还想尝试一些不同的方法并重设一些样式。

我只使用了* { margin: 0; padding: 0; }，对我来说问题似乎已经消失了：

* {
  margin: 0;
  padding: 0;
}

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') no-repeat;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="background-color: red"></div>
            <div class="listitem-content">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

我希望这些方法之一对您有用！

答案 1 :(得分：0)

添加以下样式，它为我解决了此问题。 

.listitem-bg {
  background-size: cover;
}

还可以在position:relative上添加listitem-body，这实际上不是必需的，但是对于绝对元素具有相对父div是一种很好的做法。 您的html也有一些未关闭的标签。使用我的HTML。我已经解决了。

从背景属性中删除了no-repeat。在listitem-bg

上添加了top：0和left：0 

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
  position: relative;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png');
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
  background-size: cover;
  /*     box-shadow: inset -3px -3px 0px 8px rgb(255, 255, 255); */
  /* 	-webkit-box-shadow: inset -3px -3px 0px 8px #fff;  Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  /*   	-moz-box-shadow: inset -3px -3px 0px 8px #fff;  Firefox 3.5 - 3.6 */
  /*   	box-shadow: inset -3px -3px 0px 8px #fff; */
}
<div class="listitem-block">
  <div class="ibox">
    <div class="ibox-content product-box">
      <a class="href-none">
        <div class="listitem">
          <!-- Body -->
          <div class="listitem-body">
            <div class="listitem-bg" style="background-color: red"></div>
            <div class="listitem-content">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

在此处检查snippet

相关问题
最新问题