目次
回复讨论(解决方案)
ホームページ ウェブフロントエンド htmlチュートリアル 緊急: 背景画像の適応解像度と IE window_html/css_WEB-ITnose の調整を実現する方法

緊急: 背景画像の適応解像度と IE window_html/css_WEB-ITnose の調整を実現する方法

Jun 24, 2016 pm 12:00 PM
解決 背景画像 調整

専門家の皆様、教えてください。ここに JSP ログイン ページがあります。ページ上の入力ボックスとボタンに加えて、背景画像があります。入力ボックスの位置はすべて相対位置です。ただし、IE または解像度調整後も、入力ボックスと背景画像の位置がずれることがあります。皆さんにお聞きしたいのですが、IEや解像度の変更で背景画像を変更するにはどうすればよいでしょうか? ?
専門家の皆様からアドバイスをお願いします! ! ! !ページのコードは次のとおりです:
login.jsp:
<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys.web .to. *" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION) )!= null){
response.sendRedirect("検査/インデックス");
}
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-キャッシュ") ;
response.setDateHeader("Expires", 0);
文字列パス = request.getContextPath();
文字列 BasePath = request.getScheme() + "://" + request.getServerName() + ": " + request .getServerPort() + path + "/";
%>



< ;head>
システム ログイン
"keywords " content="四川省給排水協会">




%>
> ="1.875%" >

                                                                   



                
                               












 








                    
 










                 









   



           





関数 processKey(event){
if(event.keyCode==13){
login();
}
}

function login(){
var saveFlag = true;

var regArray = new Array();
var errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("用户名不能为空 ");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符  0-9 a-z A-Z _");
var temp = checkText("userName",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;
   

regArray = new Array();
errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("密码不能为空");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符  0-9 a-z A-Z _");
temp = checkText("password",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;

if(saveFlag){
document.forms[0].submit();
}
}






对一个的style.css如下:
.loginBgGround{
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/bg.jpg); 
background-attachment:fixed;
width:100%;
height:100%;
}

.loginHeader{
/* background-image:url(../images/bg.jpg);  */
background-color:blue

}

.labelStyle{
font-weight:bold;
font-size:15px;
color:#333333;
}

.inputTextStyle{
/* background-image:url(../images/TextBox.jpg);  */
}


.warningFont{
font-size:12px;
color:#ff0000;
font-weight:bold;
}


.area {
background-image:url(../images/AREA.gif);
height:19px;
width:129px;
border:0px;
font-family:Tahoma;
font-size:12px;
color:#333333;
padding-left:3px;
}

.button{
display: block;
cursor:hand;
width:101px;
   height:92px;

  /*background:url(../images/LoginButton.jpg) no-repeat;*/
}



.button1,.button2{
float:left;
   width:196px;
   height:40px;
   position:relative;
  /*background:url(../images/button.jpg) no-repeat;*/
}

.button1{
display: block;
padding: 5px 10px 5px 11px;
cursor:hand;
font-size :22px;
  background-position:50% 20%;
}
.button2{
display: block;
padding: 5px 10px 5px 11px;

cursor:hand;
font-size :22px;
  background-position:50% 81%;
}


回复讨论(解决方案)

背景图要使用百分比,必须使用CSS3,ie9之前的浏览器不支持的。
你不要采用相对定位的方法,直接设置固定的宽度和高度实现

有一个 不是办法的办法,如果不考虑根据分辨率自适应之后的拉伸问题的话可以这么写先给 大外层 一个 position:relative 。然后 单独在这个层里面建立一个层 

対応するCSSは次のように記述されます .bgimg{width:100%;height100%;position:absolute;z-index:xxx;} .bgimg img{width:100%;height:100%;}

実際には、原則は、画像をページの下部に配置して、視覚効果を騙して背景として表示することです。次に、このレイヤーを引き伸ばします。レイヤーを引き伸ばすことは、背景を引き伸ばすよりもはるかに簡単だと思います。

二階にいるの?あなたの方法に従った後、ページと入力ボックスの位置は比較的静的になりました。しかし、新たな問題が発生します。つまり、ページと入力は IE 全体の右側に表示されます。当初設定されていた幅 = 100% ですが、実際には背景が IE50% に表示され、その後 IE150 まで右側に表示されます。 %。
コードは次のとおりです。お願いします。また、すべての専門家が私を見てアドバイスをくれるので、よろしくお願いします。
login.jsp コードは次のとおりです。

<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys.web. to.* " %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION) !=null ){
response.sendRedirect("examination/index");
}
response.setHeader("Pragma", "キャッシュなし");
response.setHeader("キャッシュコントロール", "キャッシュなし") ");
response.setDateHeader("Expires", 0);
文字列パス = request.getContextPath();
文字列 BasePath = request.getScheme() + "://" + request.getServerName() + ":" + リクエスト。getServerPort() + パス + "/";
%>
head> システムログイン ;
キーワード" content="四川省給排水協会">


< div align "left" "divTB">
gt; ;


                    
                                                                   



                
                               












 








                    
                 
            
                 
                    
                    
                    
                    
                    
                    
                    
                    
                                 
                
                
                    
                    
                    
                    
                    
                    
                    
                   
                
                
                    
                           
            


& lt;/html & gt; ;*/ C 背景位置 :center; /*background-image:url; /bg.jpg); */
幅:100%;
マージン :0 }
幅:100%;
高さ:100%;
位置:-1;
.divTB{
幅:100%;
位置:絶対; -index:1;
margin: 0;

自分でやりました! !ははは、汗が出てきました!最終的には自分でやり遂げましたが、それでも上の階に感​​謝しなければなりません。あなたのアイデアはとても賢いですね!

元の投稿者は問題をどのように解決しましたか?ご指導お願いします
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

別のSnapdragon 8Gen3タブレット〜OPPOPad3が公開されました 別のSnapdragon 8Gen3タブレット〜OPPOPad3が公開されました Jul 29, 2024 pm 04:26 PM

先月、OnePlus は Snapdragon 8 Gen3 を搭載した最初のタブレットである OnePlus Tablet Pro をリリースしました。最新のニュースによると、このタブレットの「ベビー代替」バージョンである OPPOPad3 も間もなくリリースされる予定です。上の写真は OPPOPad2 を示しています。 Digital Chat Station によると、OPPOPad3 の外観と構成は OnePlus Tablet Pro とまったく同じです。 カラー: ゴールド、ブルー (OnePlus のグリーンとダーク グレーとは異なります)。 /12/16GB+512GB 発売日:今年第4四半期(10月~12月)の新製品:探す

サプライズがやってくる! ViewSonic LX700-4K レーザー ホーム シアターには 1,700 元の公式リベートがあり、4K TV ボックスも含まれています。 サプライズがやってくる! ViewSonic LX700-4K レーザー ホーム シアターには 1,700 元の公式リベートがあり、4K TV ボックスも含まれています。 Apr 25, 2024 pm 05:49 PM

大画面ゲームにも対応できる映画のような品質のプロジェクターの購入を検討している場合は、ViewSonic LX700-4K が最適です。明るいだけでなく、4K解像度を備え、XBOX認証にも対応しています。現在、1,700元の公的補助金と無料の4K TVボックスが付いており、大幅な割引が行われています。クリックして購入: https://item.jd.com/100069910253.html ViewSonic LX700-4K は最新の第 3 世代レーザー光源技術を採用しており、目へのダメージを効果的に軽減し、心配することなく視覚的な楽しみを楽しむことができます。あなたの目は傷つきました。 3500 ANSI ルーメンの高輝度と映画のような 4K 解像度により、細部まではっきりと表示され、

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です 春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

4K HD映像がわかりやすい!この大規模なマルチモーダル モデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 4K HD映像がわかりやすい!この大規模なマルチモーダル モデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 Apr 23, 2024 am 08:04 AM

PDF、Web ページ、ポスター、Excel グラフの内容を自動的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大学、その他の研究機関が提案した InternLM-XComposer2-4KHD (略称 IXC2-4KHD) モデルは、これを実現します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業ではマルチモーダル大型モデルの最大入力画像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質疑応答モデルの人気ランキングで1位となった。扱いやすい

Windows 11 で自動超解像度 (ASR) を有効または無効にする Windows 11 で自動超解像度 (ASR) を有効または無効にする Mar 14, 2024 pm 01:40 PM

Windows 11 では、自動超解像度と呼ばれる新機能が導入されています。この機能は、人工知能テクノロジを使用して、システム上でサポートされているゲームをよりスムーズに実行し、それによってユーザーのゲーム エクスペリエンスを向上させます。この記事では、Windows 11の自動超解像度(ASR)機能を有効または無効にする方法を紹介します。人工知能テクノロジーを使用した自動超解像度により、ゲームの視覚的な詳細と解像度が向上し、低解像度の画像がより鮮明な高解像度の画像に変換されます。自動超解像度は現在ベータ版であるため、InsiderBuild でのみ利用可能です。この機能を使用するには、Windows 11 ビルド 26052 以降をインストールする必要があります。次の手順に従って、Windows 11 のバージョンを確認できます。

Realme GT6 来週会いましょう!超光と影のエンジンの祝福、通信能力の包括的なアップグレード Realme GT6 来週会いましょう!超光と影のエンジンの祝福、通信能力の包括的なアップグレード Jul 10, 2024 pm 06:36 PM

Realmeが来週Realme GT6携帯電話を発売するという少し前の公式発表に続き、公式は新しい携帯電話の主な構成パラメータと外観写真を発表しました。今日、Realmeは新しい携帯電話のシステムと画像を再び正式にウォームアップしました。予熱情報によると、Realme GT6には新しいrealmeUI5.0システムが搭載されており、4年間のシステムアップデートメンテナンスと3回の主要なAndroidバージョンアップデートを提供し、システムエクスペリエンスが「生まれ変わった」と主張しています。エディターは、realmeUI5.0 の更新された機能を簡単に要約しました。新しい流動的なクラウド インタラクションと車と車の接続機能、クロスアプリケーション コンテンツ フローのための転送ステーションの導入、新しいプライバシー ウォーターマークの最適化。権限の管理。システムの安定性とアプリケーションの起動速度を向上させます。

pptの背景画像を一律に置き換える方法 pptの背景画像を一律に置き換える方法 Mar 25, 2024 pm 04:16 PM

PPT の背景画像の統一的な置き換えは、プレゼンテーションの視覚的なスタイルを向上させるための重要な操作であり、スライド マスターの置き換えとバッチの置き換えという 2 つの主な方法で実現できます。スライド マスターの置換では、元の画像を削除し、マスターに新しい画像を挿入して、すべてのスライドに適用します。一括置換機能は、プレゼンテーション内のすべてのスライドの背景画像を直接置換します。統一された背景画像はプレゼンテーションを強化するだけでなく、聴衆の集中力も高めます。テーマと一致する高品質の画像を選択することが重要であり、透明度やサイズなどの細部の調整に注意を払う必要があります。さらに、PPT は、ニーズに応じてカスタマイズできる、グラデーション、テクスチャ、パターンなどの豊富な背景設定オプションも提供します。

iQOO Neo9S Pro+ 画面の簡単な分析。 iQOO Neo9S Pro+ 画面の簡単な分析。 Jul 19, 2024 pm 03:53 PM

今日のスマートフォン市場では、画面の品質が携帯電話の全体的なパフォーマンスを測定するための重要な指標の 1 つとなっています。 iQOO の Neo シリーズは、ユーザーに優れたゲーム体験と視覚的な楽しみを提供することに常に注力してきました。最新の製品である iQOO Neo9SPro+ は、「スリー グッド アイ プロテクション ゲーミング スクリーン」を採用しています。次に、このスクリーンの品質を見てみましょう。 iQOO Neo9S Pro+ には、1.5 KOLED e-sports ダイレクト スクリーンが装備されており、1Hz ~ 144Hz のフラッグシップ LTPO アダプティブ リフレッシュ レートをサポートしています。つまり、静的コンテンツを表示するときに超低電力スタンバイ状態を実現でき、インテリジェントな表示も可能です。ゲーム中は90Hzから144Hzのダイナミックハイに切り替えます。

See all articles