logo标签列表

使用CSS在一个div前后设置不同的颜色

htmlcss
19

对于一个网站，我正在尝试让容器之前的元素以不同颜色出现，而让容器之后的元素以另一种颜色出现。我想得到以下结果：

结果示例

我尝试了这个：CSS :before :after background color。还有很多其他的东西，但都没有成功。最后我得到了以下代码：

.section {
  width: 100%;
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container::before {
  background-color: red;
  content: ' ';
}

.section .container::after {
  background-color: blue;
  content: ' ';
}

.section .container h1 {
  padding: 10px;
}
<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

结果只是白色。
2
你需要为伪元素指定一些宽度/高度，并将它们至少设置为inline-block。 - Temani Afif
1
你没有给它设置高度或宽度，所以它无法显示任何内容。我认为更好的解决方案是使用 flexbox 来修复它（使用 3 个容器代替伪元素）。 - idontknow
6个回答
25

这是一个更简单的想法，带有背景色：

.section {
  background:linear-gradient(to right,red 50%,blue 0);
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container h1 {
  padding: 10px;
}
<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

您可以仅使用一个容器和多个背景来进一步优化：

.container {
  background:
   linear-gradient(#fff,#fff) center/250px 100% no-repeat,
   linear-gradient(to right, red 50%, blue 0);
  text-align: center;  
  padding:10px 0;

}

.container h1 {
  margin:0 auto;
  max-width:250px;
}
<div class="container">
  <h1>Hello world.</h1>
</div>

另一种透明度的方式：

.container {
  background:
   linear-gradient(red,red) left,
   linear-gradient(blue,blue) right;
  background-size:calc(50% - (250px/2)) 100%;
  background-repeat:no-repeat;
  text-align: center;  
  padding:10px 0;
}

.container h1 {
  margin:0 auto;
  max-width:250px;
}

body {
 background:pink;
}
<div class="container">
   <h1>Hello world.</h1>
</div>

另一种透明语法：

.container {
  background:
   linear-gradient(to right,
    red calc(50% - (250px/2) - 1px),transparent calc(50% - (250px/2)),
    transparent calc(50% + (250px/2)),blue calc(50% + (250px/2) + 1px));
  text-align: center;  
  padding:10px 0;
}

.container h1 {
  margin:0 auto;
  max-width:250px;
}

body {
 background:pink;
}
<div class="container">
   <h1>Hello world.</h1>
</div>

渐变在缩放中间部分方面存在一些严重的缺点，而使用 before 和 after 可以避免这些缺点，但简单性优势确实很好。 - The Nate
1
@TheNate，由于它是背景，所以没有缩放的缺点；你可以根据需要缩放中间的部分，因为它有白色背景，它将简单地覆盖渐变（第一和第二个示例），而第三个示例是具有透明度的替代方案，这是一个优点。 - Temani Afif
@TheNate 还要注意伪元素与我的第一个示例完全相同，因为每个伪元素都占据了一半的高度，而 h1 的白色背景隐藏了中间部分... 我只是用渐变（每侧一半颜色）做了同样的事情。 - Temani Afif
@TemaniAfif 在这里， center/250px 应该与 h1 的 max-width: 250px 完全相同 ? 还有 center/250px 是什么意思？ - G_real
@VirenPanchal 这里的 center/250px 100% 意思是 背景位置/背景大小，因此它被定位在中心，宽度为250像素，高度为100%... 是的，最大宽度应该与渐变宽度相同，以避免在蓝色/红色部分出现溢出。 - Temani Afif
9

我已经更新了这个内容，使用了:before和:after，使用以下代码：

.section {
  width: 100%;
  position: relative;
}

.section .container {
  background-color:#fff;
  width: 250px;
  margin: 0 auto;
  text-align:center;
}
.section .container::before {
    background-color: red;
    content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}
.section .container::after {
  background-color: blue;
  content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: -1;
    top: 0;
}

.section .container h1 {
  padding: 10px;
}
<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

1

.section {
  width: 100%;
  position:relative;
}

.section .container {
  background-color:#fff;
  width: 250px;
  margin: 0 auto;
  text-align:center;
}
.section:after,.section:before{position:absolute; height:100%; width:50%; top:0;} 
.section:before {
  background-color: red;
  content: ' ';
  left:0;
}
.container{ background:#fff; position:relative; z-index:111;}
.section:after {
  background-color: blue;
  content: ' ';
  right:0
}

.section .container h1 {
  padding: 10px;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="section">
      <div class="container">
        <h1>Hello world.</h1>
      </div>
    </div>
  </body>

</html>

1
如果您不想将文本限制在250个字符以内，可以提供一个内部的<span />标签，通过填充控制空白间距，在较小的屏幕上使用边距来控制蓝色和红色颜色。我相信这可能比之前提供的解决方案更加多样化。 

h1 {
  position: relative;
  text-align: center;
  color: #000;
  background-color: #00F;
}

h1 > span {
  position: relative;
  display: inline-block;
  padding: 20px; /* How much white-space on the sides */
  margin: 0 20px; /* How much blue and red we want to show on smaller screens when the text tightens up */
  background-color: #fff;
}

h1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #F00;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="section">
      <div class="container">
        <h1><span>Hello world.</span></h1>
      </div>
    </div>
  </body>

</html>

1
如果标题的宽度是固定的（例如在您的示例中为250像素），则可以摆脱包装器div并使用填充+线性渐变： 

h1 {
  padding: 10px calc(50% - 250px / 2);
  width: 250px;
  text-align: center;
  background-image: linear-gradient(to right
    , red calc(50% - 250px / 2)
    , white calc(50% - 250px / 2)
    , white calc(50% + 250px / 2)
    , blue calc(50% + 250px / 2)
  );
}
<div class="section">
  <div class="container">
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Donec lacinia ante id nisi ultricies dictum.</p>
    <h1>Hello again</h1>
    <p>Proin rutrum mollis lorem ac hendrerit.</p>
    <p>Nunc laoreet odio non rhoncus sodales.</p>
  </div>
</div>

0

你可以使用flex来实现这个功能。

将容器设为flex元素，然后给before和after元素添加flex:1属性，它会自动居中h1。

.section {
}

.section .container {
    display: flex;
}
.section .container::before {
    content: ' ';
    background-color: red;
    flex: 1;
}
.section .container::after {
    content: ' ';
    background-color: blue;
    flex: 1;
}

.section .container h1 {
  background-color:#fff;
  padding: 10px;
  width: 250px;
  text-align: center;
}
<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接