在css中創建一個十字圖像水印

我的需求是創建一個像圖像中顯示的十字圖像。 Div 1沒有固定的高度，它會有所不同。
那麼如何在Div 1中創建一個交叉水印？在css中創建一個十字圖像水印

我試圖像

.cross01 { 
width:520px; 
height:100%; 
background:url(../images/cross01.png) repeat-y; 
position:absolute; 
top:0px; 
z-index:1000; 

}

來源

2013-05-31 Arun

「在這裏我重視我的網站頁面的拷貝」 ..Where？ – swapnesh

對不起。現在瀏覽請看看？ – Arun

你的網站很模糊！ – jmeas

我想這是你想達到什麼樣的

爲相對Div1構成CSS position屬性設置。創建一個絕對位置的子div。在子div內插入水印圖像或文字。把你所有的內容放在父div中。將水印div放在所有內容的上方（使用z-index：1）。

希望這可以幫助

來源

2013-05-31 11:49:25 sajay

我這樣試過 .cross01 { width：520px; 身高：100％; background：url（../ images/cross01.png）repeat-y; position：absolute; top：0px; z-index：1000; } – Arun

這是我的DIV1的css .content-cart-wrapper .Div1 { padding：35px 11px 15px; margin-bottom：-12px; border：0px none; } .Div1 { border-bottom：＃e0e0e0 2px solid; } – Arun

檢查了這一點，希望這個幫助......... http://jsfiddle.net/sajaycv/Pd8ut/ – sajay

你可以添加一個包裝到圖像和使用後選擇器。

SEE DEMO

CSS

.watermark { 
    position: relative; 
} 
.watermark:after { 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); 
    bottom: 0; 
    content: " "; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

HTML

<div class="watermark"> 
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img> 
</div> 
<div> 
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img> 
</div>

來源

2013-05-31 11:51:03 2ne

但我需要十字標記。當我創建一個十字圖像並把它作爲背景圖像。但當div高度不同，然後交叉圖像擰了起來 – Arun

啊我看，我已經更新了演示http://jsfiddle.net/cNp8d/2/它現在使用css3屬性background-size來覆蓋圖像，如果你使用一個大的圖像，它不會伸展 – 2ne

但水印：之後沒有提取時它會提取？ – Arun

在css中創建一個十字圖像水印

回答

相關問題