css - css 2 背景画像

Question

cssは初めてですが、左上隅に1つの画像があり、その後に繰り返したい別の画像があります。現在、私は疲れています：

CSS

#topsection{
    background: url('../images/bannerBGs.jpg');
    background-repeat:no-repeat;
    background: url('../images/bannerBGl.jpg');
    background-repeat:repeat-x;
    height: 200px; /*Height of top section*/
    color: White;
    text-align:center
}

#topsection a{
    color: #FFFF80;
}

#topsection h1{
    margin: 0;
    padding-top: 25px;
    text-align:Left
}

#topsection h2{
    margin: 0;
    padding-top: 0px;
    text-align:Center
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IG Indy Gamers</title>
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />    
</head>
<body>
<div id="maincontainer">

<div id="topsection" > <div class="innertube">
    <h1>IG -Indy Gamers </h1>  
    <FONT style="BACKGROUND-COLOR: blue"><p align='right'><a href="#"> &nbspSignup</a> </font> / <a href='Login.html' id='LoginContent' >Login </a></p> 
    <ul id="list-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Demo's</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</div></div>

しかし、2番目の画像は最初の画像をコピーするだけです。これを行う別の方法を提案できますか。レイヤーを使用するとそれができると聞きましたが、それについてはまだ何も知りません。

score 52 · Accepted Answer

CSS3 は複数の背景画像をサポートしているようです。コンマで区切って指定します。

background: url('banner1.jpg'), url('banner2.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;

background-positionやりたいことができるまで遊んでください。

IE < 9 はこの機能をサポートしていません。

score 3 · Accepted Answer

要素を含む 2 つの要素を作成する必要があります。1 つは繰り返し画像用です。左上の画像の 2 番目。

言い換えれば、次のようなものです。

<div class="repeatingBgImage">
  <div class="otherBgImage">
    <!-- content -->
  </div>
</div>

CSS はカスケード方式で機能します。宣言したものはすべて、ステートメントの次の行によって上書きされる可能性があり、上書きされます。つまり、

.someClass {
  color: yellow;
  color: blue;
}

テキストの最終的な色は、緑ではなく青になります (黄色 + 青 = 緑)。

あなたのサンプルを考えると...

#topsection{
  background: url('../images/bannerBGs.jpg');
  background-repeat:no-repeat;
  background: url('../images/bannerBGl.jpg');
  background-repeat:repeat-x;
}

... CSS の宣言で下位にあるため、背景画像は常にbannerBGl.jpgandrepeat-xになり、以前の bg 画像を上書きして宣言を繰り返します。

score 1 · Accepted Answer

新しいブラウザーをターゲットにしている場合、css3 は 1 つの要素に 2 つの背景画像を適用できるようになりました。あなたはこれをチェックしたいかもしれません

http://www.css3.info/preview/multiple-backgrounds/

score 0 · Accepted Answer

あなたのCSS

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}

これを試して

background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg');
background-repeat: no-repeat, repeat-x;
background-position: left top , 20px 30px; 
//background-position  adjust second value which in px until  you meet your requirment

ありがとう！

css - css 2 背景画像

4 に答える 4

Related

Reference