有HTML代碼可以使我的背景圖片透明，我的文字不透明嗎？

好了，所以我一直在敲擊，技術一流，我需要滿足我的教育大一些HTML代碼。這就是我對我的背景：有HTML代碼可以使我的背景圖片透明，我的文字不透明嗎？

body { 
    background-image:url('islandbeach.jpg'); 
    background-repeat:repeat; 
    background-position:center; 
    background-attachment:fixed; 
    background-size:cover; 
}

現在，我要讓我的背景透明或褪色，所以我可以看到文本和其他圖像，我有。背景太豐富多彩，無法看到單詞而不必眯眼。有沒有可以爲我做這個的HTML代碼？我不是這個東西一個職業球員，我只是一直在關注我的一切的教授告訴我這樣做，請解釋在嬰兒學步的東西，如果你有一個答案。非常感謝你！

來源

2012-11-17 jaybug21

+1：大問題：我學到了一些東西！謝謝:) – paulsm4

下面是一個簡單的黑客，你可以做的使用：屬性之後。

CSS代碼

 body:after { 
      content: ""; 
      background-image:url('http://www.w3schools.com/css/klematis.jpg'); 
      background-repeat:repeat; 
      background-position:center; 
      background-attachment:fixed; 
      background-size:cover; 
      opacity: 0.5; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      position: absolute; 
      z-index: -1; 
     }

JS斌演示 http://jsbin.com/welcome/50098/

來源

2012-11-17 04:56:33

酷:)關鍵是使用CSS「的z-index」利用[CSS層（http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on -CSS層-z索引相對和絕對定位/） – paulsm4

試試這個

.bg { 
    width:280px; 
    height:100px; 
    position:relative; 
    display:block; 
} 

.bg:after { 
    background: url(https://www.google.co.in/images/srpr/logo3w.png); 
    opacity: .5; 
    width:280px; 
    height:100px; 
    top: 0; 
    left: 0; 
    position: absolute; 
    z-index: -1; 
    content: ""; 
}

這裏是jsfiddle File

來源

2012-11-17 05:04:50

選項1：使用褪色b ackground，以便您將要寫入的文本或您使用的圖像將是可讀的。

選項2：你的身體標記有圖像和分度類bgopc將與白色，不透明度減小最重要的是......讓你的形象將變得透明。現在具有id容器的其他div將充當您的圖像和內容的容器。

<body> 
    <div class="bgopc">&nbsp;</div> 
    <div id=container>Add your Text and Images inside this container </div> 
</body>

現在CSS將

body {background-image:url('islandbeach.jpg');background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:cover;} 
.bgopc{max-height:100%;background:#fff;position:absolute;top:0;left:0;width:100%; 
height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:1} 
#container{z-index:2;position:relative}

我希望這將解決您的問題。

來源

2012-11-17 05:17:54

有HTML代碼可以使我的背景圖片透明，我的文字不透明嗎？

回答

相關問題