使div部分着色 [英] Make div partial coloured

问题描述

我知道这个问题之前，也有很好的答案，但我仍然不能让这个工作。

I know this question is asked before and also with good answers, however I still can't get this to work.

我想做的是做一个div部分着色。我面临的问题是，彩色div需要溢出容器div。

What I try to do is make a div partial coloured. The problem I'm facing is that the coloured div needs to overflow a container div.

我在说蓝色部分。黄线表示容器div。右边的蓝色div实际上和左边一样长，所以它跨越了页面的宽度。所以左边需要是白色的，右边需要是蓝色的。

I'm talking about the blue part. The yellow lines indicate the container div. The blue div on the right actually is as long as on the left, so it spans the width of the page. So left need to be white and right need to be blue.

我试过几个事情，例如使div固定。这工作，但这使得明显固定:)

I tried several things like making the div fixed. That works but that makes the obviously fixed :)

有一些简单的方法来完成这个吗？我喜欢使用CSS而不是静态图像。

Is there some easy way of accomplishing this? I prefer to do it with CSS instead of static image.

推荐答案

使用伪元素

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 50%;
  margin: auto;
  height: 100vh;
  border-left: 1px solid green;
  /* for reference */
  border-right: 1px solid green;
  /* for reference */
}
.mybar {
  height: 50px;
  background: lightblue;
  position: relative;
}
.mybar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  background: inherit;
  height: 100%;
  width: 50vw;
  z-index: -1
}

<div class="container">
  <div class="mybar"></div>
</div>

JSFiddle演示

这篇关于使div部分着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！