CSS：雙色背景

這可能不是最好的冠軍，但我有一個艱難的時間，試圖找到一個合適的。基本上，我需要的是有一個雙色背景圖像，斷點設置爲一個特定的位置。CSS：雙色背景

這就是我現在所擁有的：

可以在this jsfiddle進行測試。

而這就是我想實現：

但有一件事是，在這條斜需要與標誌對齊，如下圖所示：

如果沒有傾斜，這可能是更容易，但我還沒有找到一種方法來達到所期望的行爲。我試圖做的是創建一個背景顏色的div，並在該div中，第二個將放在頂部包含圖像。

<div class="line-container"> 
     <div class="line">     
     </div> 
</div> 

.line-container{ 
    width: 100%; 
    background-repeat: repeat-x; 
    background-color: #009b3a; 
} 
.line{ 
    background-image: url('http://s8.postimg.org/fc0umdjut/image.png'); 
    display: block; 
    width: 50m; 
    margin: 0 auto; 
    height: 10px; 
}

但位置和顏色，以雙方都錯了，如圖this jsfiddle：

任何建議？

來源

2015-12-29 Gonzalo

試試這個https://jsfiddle.net/f8p3ahb3/5/ –

謝謝@NenadVracar！這真的很有幫助！ +1 – Gonzalo

@Nenad，儘管如此，我仍然有一個問題。斜面應始終與徽標對齊，我似乎無法使用上述解決方案。有什麼想法嗎？ – Gonzalo

似乎是一個漸變的工作。

background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(45deg, #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1); /* IE6-9 fallback on horizontal gradient */

只需將其添加到您的css類並相應地更改顏色。

來源

2015-12-29 23:22:31

感謝您的及時回覆。問題是圖像有一個傾斜，而不是一條直線。這可能使用漸變？ – Gonzalo

我剛剛更新的答案，包括在其中，兩種顏色連接點處的橫向傾斜！這是通過旋轉漸變完成的。 –

謝謝@Nick。不過，我仍然有一個問題。斜面應始終與徽標對齊，我似乎無法使用上述解決方案。有什麼想法嗎？ – Gonzalo

即使接受的答案是偉大的，我想分享一個替代使用梯度。

下面是一個使用::before僞類和CSS border技巧來獲得角度部分的選項。您可以通過調整邊框寬度來調整「角度」。根據需要可以調整僞元素上的width屬性。

div { 
 
    background: green; 
 
    height: 10px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    background: darkgreen; 
 
    border: solid transparent 0; 
 
    border-bottom-width: 10px; 
 
    border-right-color: green; 
 
    border-right-width: 10px; 
 
    box-sizing: border-box; 
 
    content: ''; 
 
    height: 10px; 
 
    position: absolute; 
 
    width: 5em; 
 
}

<div></div>

來源

2015-12-30 00:39:21 Quantastical

+1謝謝@Quantastical！這是一個很好的解決方案。但是，我似乎無法調整僞元素的寬度，因此傾斜總是顯示在與徽標相同的位置。對此有何想法？這裏有一個更新的[jsfiddle]（https://jsfiddle.net/f8p3ahb3/6/），你的建議讓事情變得更簡單： – Gonzalo

CSS：雙色背景

回答

相關問題