cssで体の背景画像を変更する

私は自分の背景画像を変更しようとしています。問題は、自分の体にあるように、他のウェブページでも変化しています。同じ背景画像。最初のページで私の体にid/classを与えるべきですか（私はどこに関数を置いておきたいですか）？cssで体の背景画像を変更する

<!DOCTYPE Html> 
<head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" src="randomMessages.js"></script> 
    <title>MakeHappy, One good thought everyday!</title> 
    <link rel="stylesheet" href="MakeHappy.css" /> 
</head> 
<body class="Main"> 
    <input type="button" onclick="popup()" value="Click to be Happy!"> 
    <div id="demo"></div> 
</body>

<!DOCTYPE Html> 
<head> 
    <meta charset="utf-8" /> 
    <title>MakeHappy, One good thought everyday!</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" src="randomMessages.js"></script> 
    <link rel="stylesheet" href="MakeHappy.css" /> 
</head> 
<div id="wink" class="imageSwap"> 
</div> 
<body> 
    <header> 
    <nav> 
     <ul> 
     <a id="MakeHappy" href="Main.html">Make Happy</a> 
     <a id="Contact" href="#">Contact us</a> 
     <a id="Suscribe" href="#">Suscribe</a> 
     <a id="Project" href="#">Project</a> 
     </ul> 
    </nav> 
    </header> 

</body>

body { 
    background-image: url("MakeHappy.jpg"); 
    background-repeat: no-repeat; 
    background-position: 200px 60px; 
    background-size: 900px; 
    background-color: black; 
} 
body:hover{ 
    background-image: url("MakeHappy2.jpg"); 
    background-position: 200px 60px; 
} 
.Main{ 
    background-size: 100px; 
    background-position:top; 
} 
.imageSwap{ 
    position:absolute; 
    color: yellow; 
    padding: 150px; 
    bottom: 130px; 
    right: 500px 
} 
#MakeHappy{ 
    color: white; 
    position: absolute; 
    right: 660px; 
} 
#Contact{ 
    color: white; 
    position: absolute; 
    right: 660px; 
    bottom: 10px; 
    transform: rotate(180deg); 
} 
#Suscribe{ 
    color: white; 
    position: absolute; 
    left: 320px; 
    bottom: 300px; 
    transform: rotate(270deg); 
} 
#Project{ 
    color: white; 
    position: absolute; 
    right: 360px; 
    bottom: 300px; 
    transform: rotate(90deg); 
} 
.Main div{ 
    color: white; 
    position: fixed; 
} 
input{ 
    position: fixed; 
    bottom: 150px; 
    left: 625px; 
}

出典

2016-10-12 Jullian-luc Barber

純粋なhtml/cssでは、サイトの背景だけを残して、ホームページに埋め込んだスタイルタグを目的の背景画像とともに追加して、それを重要とマークした場合はどうなりますか？それはあなたのために働くだろうか？ – nocturns2

大文字/小文字の区別を避けるようにしてください。 –

\あなただけのホバーはあなたのスタートページを言うことができますしたい場合は、それをその具体的なバックグラウンドを持つクラスを与える必要があります。

body { 
    background-image: url("MakeHappy.jpg"); 
    background-repeat: no-repeat; 
    background-position: 200px 60px; 
    background-size: 900px; 
    background-color: black; 
} 

.startpage-background:hover{ 
    background-image: url("MakeHappy2.jpg"); 
}

が、あなたの最初のHTMLがエラーを持っている、あなたはbody

ない有効なHTML

<head> 
    <link rel="stylesheet" href="MakeHappy.css" /> 
</head> 
<div id="wink" class="imageSwap"> 
</div> 
<body> 
</body>

外のdivを宣言するべきではありません。しかし、一般的に、あなたのHTMLとCSSはないグッドプラクティスとしています一貫性のないコード。私はidだけを要素のスタイルに使うことは決してありません。また、の代わりにsome-classのようにクラスとIDを小文字にしておいてください。また、私はあなたが絶対にあなたのナビゲーション要素を配置することを避けることができると思います。

出典

2016-10-12 19:57:54

cssで体の背景画像を変更する

答えて

関連する問題