灰度背景更改文本顏色？ CSS
[英]Grayscale Background Changing Text Color? CSS
問題描述
我的目標是使背景圖像跨過整個屏幕，如下所示： http : //playjudgey.com/
我試圖將背景圖像更改為灰度，但是每次這樣做，它都會更改覆蓋在圖像上的所有文本。 我假設過濾器適用於我的div內部的所有內容。 我的代碼如下：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
</body>
所以這就是我為CSS做的：
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('../img/money.jpg');
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
問題是我寫的文字不是紅色，而是灰色。 有什么辦法可以對此進行不同的編碼，以便我的文本顯示為彩色？ 還是應該通過外部程序將圖像變成灰度？
5 個解決方案
解決方案1
3 2015-09-21 20:01:29
您可以使用僅適用於背景的混合模式獲得相同的效果，此外，它還具有更多的支持（FF）
.hometext { width: 600px; margin: 0 auto; color: red; text-align: center; font-size: 60px; } .wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url('http://placekitten.com/1000/750'); background-color: gray; background-blend-mode: luminosity; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; }
<div class="wrapper"> <div class="hometext"> You are the best! </div> </div>
解決方案2
0 2015-09-21 19:57:00
如果您不需要動態更改背景顏色，則只需在基本圖像編輯器中將其更改為灰度即可。 無論如何，我相信CSS filter不是完全跨瀏覽器兼容的，因此您會更安全（更輕松）。
但是，如果要保持現在的狀態，則只需要更改文本的filter屬性即可，因為它是從父div繼承而來的。
解決方案3
0 2015-09-21 20:02:16
如果將hometext div放在包裝器之外，使它們都成為絕對值，該怎么辦：
<body>
<div class="wrapper"></div>
<div class="hometext">
You are the best!
</div>
.hometext {
margin: 0 auto;
color: red;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
}
樣式和位置需要其他CSS，但這是一個小提琴： http : //jsfiddle.net/Lepe84tu/
解決方案4
0 2015-09-21 20:02:30
而不是把背景圖像上的.wrapper ，你可以再拍div作為同級.hometext具有圖像為背景-這樣你可以獨立風格的圖像和文本。
解決方案5
-2 2015-09-21 19:58:09
您的<div class="wrapper"> div也包裝了您的首頁hometext div。 您應該嘗試這樣：
.hometext {
width: 600px;
margin: 0 auto;
color: red !important;
text-align: center;
}
使用CSS / SASS更改a：before的背景URL和焦點上的文本顏色。
[英]Changing background URL of a:before with CSS/SASS and color of text on focus.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.