如何獲得一個透明的背景圖像重複

背景圖像是透明的。徽標和文字疊加。

問題是，我想要背景圖像重複-y。使用寬視口很好，但是當視口變窄時，文本會通過圖像的底部。

如果我做的：

body { 
    background: url(...); 
    opacity: 0.6; 
    background-repeat: repeat-y; 
}

那麼背景重複y方向，但所有的子元素變得透明爲好。如果沒有子元素，我還沒有找到使圖像透明的方法。

我正在格式化背景圖像，使其與視口一起縮放，但始終居中 - 圖像的中間始終位於中間。 ("CSS-Only Technique #2")

有什麼建議嗎？

來源

2013-09-22 abalter

應用不透明度：0.6;至主體將使整個頁面透明。更改IMG到div的是這樣的：

HTML：

<div id="background-image"></div>

的CSS：現在你需要的背景圖像的大小設置爲100％，在x ACHSE和經銷商於y ACHSE和廣告z-index：0;

#background-image { 
    background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg); 
    width: 100%; 
    top: 0; 
    left: 0; 
    height:100%; 
    opacity: 0.6; 
    position: fixed; 
    background-repeat: repeat-y; 
    background-size: 100% auto; 
    padding: 0; 
    margin: 0; 
    z-index:0; 
}

演示：http://jsfiddle.net/k8G3C/4/

來源

2013-09-22 14:30:50

如何獲得一個透明的背景圖像重複

回答

相關問題