2014-10-06 85 views
5

定義寬度請在這個小提琴看一看:http://jsfiddle.net/jpftqc26/CSS梯度:以像素爲單位

一個CSS梯度,開始從左邊的黑色,再變成紅色,然後回黑色。真的很簡單。

有什麼辦法可以讓紅色部分寬度爲500px,黑色部分填滿屏幕,無論分辨率如何?中間是紅色,就像小提琴一樣。

是否有一種方法可以在CSS漸變中定義一個以像素爲單位的顏色停止點之間的寬度?

代碼:

.test_gradient { 
background: 
linear-gradient(
     to right, 
     #000000, 
     #000000 20%, 
     #ff0000 20%, 
     #ff0000 80%, 
     #000000 80% 
    ); 
+1

是否有它有梯度的原因? – Jung3o 2014-10-06 18:38:32

+0

記住'calc'功能。你會做'...#ff0000 calc(20%+ 10px),...' – Gqqnbig 2017-04-26 00:05:51

回答

0

如果你想要的黑色部分是靈活的,紅色的部分是固定的,你可以使用這樣的事情:

html{height:100%;} 
.test_gradient { 
    background: #000000; 
    position:relative; 
    margin:0; 
    height:100%; 
} 
.test_gradient:after{ 
    content:''; 
    position:absolute; 
    top:0; 
    height:100%; 
    width:500px; 
    left:50%; 
    margin-left:-250px; 
    background:#f00; 
} 

DEMO

+1

我認爲*必須*在這裏是錯誤的詞。顯然*可能*是一個更好的選擇,因爲肯定有多個解決方案。 – Phlume 2014-10-06 19:06:05

+0

謝謝!會做一些測試! – Malasorte 2014-10-06 19:09:10

+0

@Phlume,sry,我的英語不好 – Anon 2014-10-06 19:11:51

1

目前,我想不出如何在只CSS漸變和一個單一的元素做到這一點。

鑑於您的例子中,假設一個額外的div是確定的,那麼這裏沒有梯度的替代方法(http://jsfiddle.net/jpftqc26/2/):

HTML

<body class="background"> 
    <div class="foreground"/> 
</body> 

CSS

html, body { 
    width: 100%; 
    height: 100%; 
} 

.background { 
    background-color: #000000; 
} 
.foreground { 
    background-color: #ff0000; 
    width: 100%; 
    max-width: 500px; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

這將產生相同的效果,使用一個額外的元素,並提供一個紅色的前景,將增長到最大500px寬 - 超過它在所有黑色兩側。如果你想要的紅色總是的寬度是500px,那麼只需刪除max-width規則並將width更改爲500px。

0

我認爲,最好的解決辦法,無需添加任何HTML元素,是使用圖片作爲背景:

.test_gradient { 
    background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top; 
} 

http://jsfiddle.net/Monteduro/jpftqc26/3/

+1

如果你打算使用圖片,你可以嵌入它以避免額外的請求 - http:// jsfiddle。淨/ jpftqc26/7/ '.test_gradient { 背景:URL(數據:圖像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4z8AAAAMBAQAY3Y2wAAAAAElFTkSuQmCC)重複-Y#000中心頂部; background-size:500px; }' – STW 2014-10-06 18:50:52

+0

op特別要求在css的漸變 – Phlume 2014-10-06 19:02:14

6

是。你可以用硬像素點和calc函數來做到這一點。 只需設置它們的方式:

http://jsfiddle.net/jpftqc26/9/

CSS:

.test_gradient { 
background: 
linear-gradient(
     to right, 
     #000000 0px, /* Starting point */ 
     #000000 calc(50% - 250px), /* End black point */ 
     #ff0000 calc(50% - 250px), /* Starting red point */ 
     #ff0000 calc(50% + 250px), /* End red point */ 
     #000000 calc(50% + 250px), /* Starting black point */ 
     #000000 100% /* End black point */ 
    ); 
+1

Phlume,神奇的主意!分辨率無關。將檢查瀏覽器對calc的支持,並在幾個小時後回覆並接受一個可接受的答案! – Malasorte 2014-10-06 19:08:43

+0

可能需要供應商前綴它,因爲正在出現的CSS謹慎使用。關於它的一些dev註釋在這裏:https://developer.mozilla.org/en-US/docs/Web/CSS/calc – Phlume 2014-10-06 19:10:58

+1

calc(% - px);不錯的把戲 – Kareem 2015-10-14 12:27:03

4

另一種方法來做到這一點,而無需使用計算值(),是使用2個不同的梯度

.test_gradient { 
background-image: 
linear-gradient(to left, #ff0000 0px, #ff0000 250px, #000000 100px), linear-gradient(to right, red 0px, #ff0000 250px, #000000 100px); 

background-size: 50.1% 1000px; 
background-position: top left, top right; 
background-repeat: no-repeat; 
} 

一個轉到正確的,其它的左側,而且每一個都有一半的總寬度

fiddle

相關問題