背景顏色的背景位置

我能夠給出背景圖像的開始位置。但是，如果我給固體填充背景職位，它不工作。這是js小提琴。背景顏色的背景位置

http://jsfiddle.net/yPVJE/

所以我們可以設置起始位置和實體填充背景的大小？

謝謝！

來源

2011-12-19 rajkamal

我試圖得到這個效果http://jsfiddle.net/H48ua/，沒有內部div「.bg」通過轉移「.bg」到「.cover」div – rajkamal 2011-12-19 08:05:34

您無法偏移背景顏色。只有背景圖像有一個位置。

來源

2011-12-19 07:56:51 Scott

這是爲了抵消固體背景顏色，採用線性梯度用透明顏色像素的第一x個單程：

.offset { 
    background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%); 
    width: 100%; 
    height: 500px; 
}

這裏的a demo上的jsfiddle。

來源

2012-07-26 16:15:33 StuR

我參加了JSFiddle的演示，結果發現沒有什麼，即使我推動運行。我期待clr div的背景顏色剛好抵消一點，但沒有任何表現。腳本中是否有錯誤？無論什麼是值得的，我試着從Ash的回答中添加CSS，並且看到了什麼也沒有。我甚至嘗試將其添加到原始的一個。 – 2014-06-23 22:51:34

@SarahWeinberger - 再次嘗試JSFiddle鏈接，我已將瀏覽器前綴添加到CSS。 – StuR 2014-06-24 09:09:49

謝謝，更新的代碼工作。其他人注意：Visual Studio 2013內部設計視圖不顯示漸變/顏色。您必須在真實瀏覽器中運行該示例才能看到結果。我陷入了這個陷阱，試圖找出Fiddler和我的瀏覽器（VS2013設計視圖）之間的區別，並意識到VS不是真正的瀏覽器，並有其侷限性。 – 2014-06-24 15:58:13

我會採取類似的方法來StuR，但使用背景位置，而不是梯度點。然後，您可以像平常一樣設置背景位置。

div { 
    background:linear-gradient(left, #000, #000) no-repeat 50px 50px; 
}

來源

2012-10-24 19:17:08 Ash

請注意，這不適用於百分比值，如50％ – jsheffers 2015-02-02 21:27:04

請注意，IE9 not＆opera mini不支持線性漸變 – Flion 2015-12-04 16:42:34

這看起來更像素完美。只有線性漸變，當元素太大時，我在某些瀏覽器中會看到一些「模糊」的線條。 – hesselbom 2016-01-14 09:01:24

是的，線性漸變它的工作原理：

div { background-image: linear-gradient(transparent 10px, grey 10px); }

來源

2014-05-26 13:43:25 user3223452

當心不適當的對準當使用linear-gradient點。這裏有一個更好的方法：

background: linear-gradient(#6699cc, #6699cc); 
background-size: auto 4em; 
background-repeat: no-repeat;

它採用linear-gradient只是產生純色，然後調整，以反映覆蓋區域的大小。此外background-position可以根據需要使用

來源

2018-01-03 11:53:53 thodnev

另一種方式來實現，這將是一個僞元素添加到div元素，像這樣：

div { 
 
    ::before { 
 
    border-top: 10px solid #0066a4; 
 
    content:""; 
 
    margin: 0 auto; /* this centers the line to the full width specified */ 
 
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ 
 
    top: 12px; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    } 
 
}

由埃裏克·拉什看到這個CodePen作爲一個工作的例子：https://codepen.io/ericrasch/pen/Irlpm

來源

2018-01-23 02:44:12

背景顏色的背景位置

回答

相關問題