使用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.