ホーム > サポートメニュー > ユーザー助け合い掲示板

質問内容・回答一覧ツリー

Q. custom06のカスタム - 投稿者:ちろ(2017年03月02日 06:30) No.7500  
Q. custom06のカスタム [解決済み]
  • 投稿者:ちろ
背景以外の白い部分を半透明にする方法を教えてください。
背景を可愛い濃い模様にしたので、白いと殺風景なので、半透明したいのですが、教えていただけますか?
よろしくお願い致します。
  • 記事ID:No.7500
  • 投稿日時:2017年03月02日 06:30 (2017年03月02日 16:04更新)

回答一覧(返信数 2 件)

投稿者:3steps A. Re: custom06のカスタム

手軽に実現できる2つの案を提案します。
どちらの方法がご自身にあっているか考えて選択してください。
なお、背景を半透明にすると文字が読みづらくなるのは宿命です。文字に対してのみ背景色を指定してコントラストを上げたり、半透明にする色を変えるなどして対応してください。

案1:
CSS部分を編集します。

/*ページ全体の幅、レイアウトを中央揃え*/
#wrapper {
width:950px; /* A */
margin:0 auto;
padding:20px 0 0;
text-align:left;
background-color:#fff;
}

この部分に以下の3行を加えます
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

上からIE向けの設定、FirefoxなどのMozilla系向けの設定、Opera向けの設定です。
上記の例では、全て濃度50%の半透明を示しています。

3行を挿入するとこんな感じになります。

/*ページ全体の幅、レイアウトを中央揃え*/
#wrapper {
width:950px; /* A */
margin:0 auto;
padding:20px 0 0;
text-align:left;
background-color:#fff;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

30%にする場合は
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
と変更して下さい。
ただしこの場合、<div id="wrapper">〜</div>に内包されているすべての要素(文字を含む)が半透明になってしまいます。
背景だけを半透明にしたい場合は案2を使います。



案2:
背景に半透明の透過PNGを指定する

白い部分に背景画像を適用し、その背景画像を半透明にします。
この場合は背景のみが半透明になるため、文字などはそのままの濃さになります。
欠点としては濃度や色の変更が手軽に行えないことです。
画像の再加工&再アップロード&CSSの再編集が必要になります。

アルファ値を設定可能なペイントソフトなどでPNG画像を加工して背景に設定します。
単一色であればサイズは3x3ピクセル程度で良いでしょう。
※8bitのPNGではアルファチャンネルを扱えません。


CSSを編集して指定します。

#wrapper {
width:950px; /* A */
margin:0 auto;
padding:20px 0 0;
text-align:left;
background: #ffffff url('アップロードした画像のURL') repeat;
}

濃度や色の調整がやや手間ですが、背景のみを半透明にするのであれば案2をお勧めします。
画像の加工に必要なソフトがない場合は、 pixlr.com/editor のオンラインツールでアルファチャンネルの加工ができます。

以上です

  • 投稿日時:2017年03月02日 09:23
投稿者:ちろ A. Re: Re: custom06のカスタム

丁寧にありがとうございます!!がんばってやってみます。本当にありがとうございます。

  • 投稿日時:2017年03月02日 16:04