對角線/紋理疊加在背景漸變/圖像

有沒有辦法只使用CSS來複制以下紋理/填充？我想在不同背景填充的頂部其他容器上使用相同類型的對角線，所以我希望可以有一種方法可以在CSS中完成，而無需創建模式並將它們用作圖像。對角線/紋理疊加在背景漸變/圖像

任何想法，我可能會做到這一點？我猜測它可能必須是這樣的：

<div id="gradientFill"> 
    <div class="linePattern"> 
    <!-- Content goes here --> 
    </div> 
</div>

有沒有更好的解決方案？我不想遇到在對角線上使用alpha /透明度的問題，然後讓內容也是透明的。

enter image description here

SOLUTION貼在下面。

來源

2013-01-07 Jon

我沒有看到你的榜樣圖像 –

他們是微弱的，但他們有斜線。按Ctrl +，你會看到它們。用縮放版本編輯我的文章。 – Jon

你需要得到梯度發生器......我認爲...... http：//www.colorzilla.com/gradient-editor/ – sourcecode

一個正確的解決辦法：

jsFiddle：如果你沒有看到的對角線，這是因爲的jsfiddle並不真的很喜歡從imgur外部鏈接到託管的圖像。只需在另一個水龍頭中複製並粘貼imgur url以將其放入緩存中，然後重新加載小提琴。

解決方案的關鍵是顏色背景的相對定位以及紋理/線條疊加的絕對定位。對於這個職位未來的訪客，如果要覆蓋在圖像上的紋理，應用：

位置：相對

...你的形象DIV和：

位置：絕對

...覆蓋div。

<div id="alert"> 
    Text goes here! 
    <div class="lines"></div> 
</div>

#alert { 
    position:relative; 
    padding:10px; 
    box-shadow:0px 1px 1px #000, 0px 1px 1px #F5BFB1 inset; 

    background: #ea765a; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ea765a 0%, #d2583b 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ea765a 0%,#d2583b 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0); /* IE6-9 */ 
} 

.lines { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background:url(../img/lines.png); 
    opacity:0.05; 
}

來源

2013-01-07 18:05:07 Jon

您可以在按鈕上使用多個背景圖片，讓你有你的標準梯度頂部帶有條紋的漸變使用的背景大小的平鋪：

.stripy { 
    background-image: 
     linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent), 
     linear-gradient(bottom, rgb(83,84,84) 0%, rgb(181,181,181) 100%); 
    background-size:50px 50px, auto; 
}

的條紋是有點厚，但有一點點的實驗應該有可能得到你想要的。

來源

2013-01-07 17:39:11 jonshot

我試圖在jsFiddle中沒有看到背景。不知道我做錯了什麼。http://jsfiddle.net/esj4p/ – Jon

@Jon你的背景是錯誤的。使用此網站生成漸變背景http://www.colorzilla.com/gradient-editor/。簡單的工作演示http://jsfiddle.net/enve/esj4p/1/ – Enve

我想通了。編輯原始帖子。 – Jon

對角線/紋理疊加在背景漸變/圖像

回答

相關問題