背景画像を透明にするには何のCSSプロパティがありません私の知識を1として、 は、私は何度も何度もしようとしているが、それでも、私はこれまで、溶液からだけど、ここで は私のアプローチです：cssで体の背景画像を透明にするには？
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
filter: opacity(opacity: 30%);
z-index: -1;
background-repeat: no-repeat;
}
私が探しました他のように質問し、同様のものを見つけましたが、問題が残っています。
おそらく、これはあなたを助けることができます。 あなたは体にあなたの背景を置く必要があります::
<!DOCTYPE html>
<html>
<head>
\t <title></title>
\t <style type="text/css">
body {
width: 1200px;
height: 1200px;
display: block;
position: relative;
margin: 0 auto;
z-index: 0;
}
body::after {
background: url(http://kingofwallpapers.com/background-image-laptop/background-image-laptop-018.jpg);
content: "";
opacity: 0.9;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
div {
font-size: 36px;
color: white;
}
\t </style>
</head>
<body>
<div>
The text will not affected by the body
</div>
</body>
</html>rgba背景プロパティは、白色と不透明で使用できます。
background; rgba(255, 255, 255, 0.3) url(IMAGE_PATH); /* Add other attributes as required */
値を設定するには、opacityプロパティを使用する必要があります。指定できる値は0〜1です。
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
opacity: 0.3;
z-index: -1;
background-repeat: no-repeat;
}
W3Cのdocumentationを確認してください。
後に内容が不透明 –
に影響されることに注意が同意します。私の悪い。ただ実現しました。 – NutcaseDeveloper
代替アプローチは、スタイルシート内の画像ソースURLを使用してバックグラウンドとして絶対位置の画像を使用して次のプロパティで画像を設定し、
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
することであるが、それはハード動的ソースを変更することを可能にします。
通常、バックグラウンドイメージは事前処理されていますが、PS、スケッチなどのイメージプロセスアプリケーションを使用してイメージを透明にすることができるように、透過PNGファイルを最初に静的サーバーにアップロードすることも考えられます。
私はあなたに仲間をくれました、あなたの助けに感謝します。あなたが私の問題に最も簡単な解決策を示しているようです。 –