使用CSS在div之前和之后使用不同的颜色
[英]Have a different color before and after a div with CSS
问题描述
对于一个网站，我试图让容器前的元素以与容器后面的元素不同的颜色显示。 我想得到以下结果：
我试过这个： CSS：之前：在背景颜色之后 。 还有很多其他的东西，但这一切都没有成功。 我最终得到以下代码：
.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>
结果只是白色。
6 个解决方案
解决方案1
23 2019-02-20 10:53:15
这是一个更容易理解背景着色的想法：
.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>
解决方案2
9 已采纳 2019-02-20 11:00:22
我已经使用: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>
解决方案3
1 2019-02-20 11:25:02
.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>
解决方案4
1 2019-02-20 17:54:04
如果您不想将文本限制为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>
解决方案5
1 2019-02-21 06:50:59
如果标题的宽度是固定的（在您的示例中为250px），那么您可以摆脱包装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>
解决方案6
0 2019-02-20 13:46:55
您可以使用flex来完成此任务。
通过使容器成为柔性元件，然后给予前后元素1的flex，它会自动使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>
如何将 HTML5 范围输入设置为在 slider 之前和之后具有不同的颜色？
[英]How to style HTML5 range input to have different color before and after slider?
如何设置 HTML5 范围输入的样式，使其在 React 中的滑块前后具有不同的颜色？
[英]How to style HTML5 range input to have different color before and after slider in React?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.