HTML/CSS文本背景透明但文本不是

所以我遇到了問題。我環顧四周，環顧四周，但沒有運氣。我想讓我的身體背景透明，但讓文字不透明。現在，我一直在做同樣的不透明。這裏是我的代碼：HTML/CSS文本背景透明但文本不是

@charset "utf-8"; 
body { 
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
    background-color: #42413C; 
    margin: 0; 
    padding: 0; 
    color: #000; 
} 

/* ~~ Element/tag selectors ~~ */ 
ul, ol, dl { 
    padding: 0; 
    margin: 0; 
} 
h1, h2, h3, h4, h5, h6, p { 
    margin-top: 0; 
    padding-right: 15px; 
    padding-left: 15px; 
    opacity:1; 
} 
a img { 
    border: none; 
} 
a:link { 
    color: #42413C; 
    text-decoration: underline; 
} 
a:visited { 
    color: #6E6C64; 
    text-decoration: underline; 
} 
a:hover, a:active, a:focus { 
    text-decoration: none; 
} 
.container { 
    width: 750px; 
    margin: 0 auto; 
} 
.content { 
    padding:20px; 
    width:710px; 
    position:relative; 
    background:#CCC; 
    opacity: 0.5; 
} 
.fltrt { 
    float: right; 
    margin-left: 8px; 
} 
.fltlft { 
    float: left; 
    margin-right: 8px; 
} 
.clearfloat { 
    clear:both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
} 
.header { 
    top:0%; 
    width: 750px; 
    height: 200px; 
    background-image: url(images/header.png); 
    background-repeat:no-repeat; 
    background-position:center; 
} 
.navbar { 
    height: 50px; 
    width: 750px; 
    position: relative; 
    z-index: 2; 
} 
#bg { 
    position: fixed; 
    top: 25%; 
    left: 15%; 
    z-index: -1; 
} 
div { 
display: block; 
}

這裏是我的網站（點擊鏈接不要在你的URL類型「tccraft.net」它會帶你到一個Facebook頁面）：http://tccraft.net/index.php 謝謝！

來源

2013-03-16 tec4

的可能重複[透明背景，而不是內容裏面（文字和圖片），在CSS只？] （http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on） – 2014-02-27 08:37:04

不要使用opacity爲此，請將背景設置爲RGBA值，而不是僅使背景變爲半透明。在你的情況下，它會是這樣的。

.content { 
    padding:20px; 
    width:710px; 
    position:relative; 
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */ 
    background: rgba(204, 204, 204, 0.5); 
}

有關css中rgba-values的更多信息和示例，請參見http://css-tricks.com/rgba-browser-support/。

來源

2013-03-16 12:37:06

啊正確的 - 這是有道理的感謝！ – tec4 2013-03-16 12:54:46

它的工作！再次感謝！ – tec4 2013-03-16 13:00:13

完美！這工作。 – 2017-01-16 06:12:17

對於完全透明背景的使用：

background: transparent;

否則，對於一個半透明的顏色填充使用：

background: rgba(255,255,255,0.5);

其中的值：

background: rgba(red,green,blue,opacity);

你也可以爲漸變背景使用rgba值。

要在圖像背景上獲得透明度，只需事先在圖像編輯器中簡單地減少圖像的不透明度即可。

來源

2013-03-16 12:37:17

opacity將使文本和背景都透明。例如，使用rgba()值來代替使用半透明背景色。適用於IE8 +

來源

2013-03-16 12:38:09 FelipeAls

如果您在現代瀏覽器中使用RGBA，則不需要讓較舊的IE僅使用RGB的非透明版本的給定顏色。

如果您不堅持僅使用CSS的解決方案，請嘗試使用CSS3PIE。有了這個語法，你可以清楚地看到在您在現代瀏覽器中看到年長的IE相同的結果：

div { 
    -pie-background: rgba(223,231,233,0.8); 
    behavior: url(../PIE.htc); 
}

來源

2013-09-25 21:44:14

HTML/CSS文本背景透明但文本不是

回答

相關問題