[解決済み] テーブルセルの背景を透明にする方法
質問
all users"のページで、テーブルの中にテーブルを作成しています。最初のテーブルは、広告とユーザーの2つの部分に分かれています。最初のテーブルは、広告とユーザーの2つの部分に分かれています。
<tr><td>...</td></tr>
そして、各ユーザーのデータがphpで表示されるように、別のテーブルを作成しました。
画像はこちらです。 http://postimg.org/image/3mbeyb411/
画像にあるように、親テーブルの右側(左側より大きい)には、"users"テーブルがあり、プロフィール写真が表示され、これは良いことです。
さて、この素敵なぼかしの背景をページに貼り付けましたが
親テーブルの白いセルの背景
がブロックしています。
その白い背景を透明にするにはどうしたらいいのでしょうか?試しに
background:transparent;
が、役に立たない。
<table id = "MainTable">
<tr>
<td width = "20%">
</td>
<td width = "80%">
<table.......>***php users appear code here***</table>
</td>
</tr>
</table>
そしてCSSの場合
#MainTable {
width: 100%;
background-color: #D8F0DA;
border: 1px;
min-width: 100%;
position: relative;
opacity: 0.97;
background: transparent;
}
どうか本当に助けてください。何日もググっているのですが、まだ答えが一つも見つかっていません
最新情報
私が探していたのは、次のようなものです。
<td style="background:transparent;">
が、やはりウェブ上では見つかりませんでした。あるいは、テーブルとセルの背景を透明にすることは可能なのでしょうか?
解決方法は?
透明な背景は、要素の背後にあるもの、この場合は、あなたの
td
は、実際には親テーブルです。ですから、純粋なCSSを使ってあなたが望むことを実現する方法はありません。スクリプトを使っても、直接的な解決にはならない。スクリプトで回避できるのは、ボディと
td
. ただし
background-position
ウィンドウのサイズが変更されるたびに、それに応じて変更されます。以下は、デフォルトの背景位置である
body
(これは
left top
を更新するようにコードを変更する必要があります。
background-position
の
td
を正しく表示)。
HTML :
<table id = "MainTable">
<tr>
<td width = "20%"></td>
<td width = "80%" id='test'>
<table>
<tr><td>something interesting here</td></tr>
<tr><td>another thing also interesting out there</td></tr>
</table>
</td>
</tr>
</table>
CSS :
/* use the same background for the td #test and the body */
#test {
padding:40px;
background:url('http://placekitten.com/800/500');
}
body {
background:url('http://placekitten.com/800/500');
}
JS (を使用するのがよいでしょう。 jQuery ):
//code placed in onload event handler
function updateBackgroundPos(){
var pos = $('#test').offset();
$('#test').css('background-position',
-pos.left + 'px' + " " + (-pos.top + 'px'));
};
updateBackgroundPos();
$(window).resize(updateBackgroundPos);
デモです。
ビューポートをリサイズしてみてください。
background-position
の背景のように見える効果が得られます。
td
は透明です
をボディに
.
関連
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】html文書に縦の空白を挿入するには?
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み] text-overflow: 省略記号が機能しない
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?