0

メインのナビゲーション メニューとして使用したい背景画像があります。私がしたいのは、この画像をスライスに切り取り、特定の領域/ボタンにロールオーバー、ホバー イベントを追加することです。背景サイズのカバーと同じ効果を持たせようとしましたが、画像をスライスしました。

html { 
            background: url(../images/confetti.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

//EDITこれは私がこれまでに行ったことです... http://translationgames.org/template.htmlこのページには、幅をパーセンテージで定義する各画像のcssクラスがあります。しかし、それは少しばかげているように見え、丸めの問題があります。特定の領域をロールオーバーすると、何かが表示されることに注意してください。これが、スライスとして使用したい理由です。私はまだ :hover のものを作成していません。

だから私は異なるサイズのスライスにカットされた画像を持っています.1行は1920 x 100です.次の行は220x320の3つの画像です.それが機能する方法は、幅100％の背景コンテナdiv「bgcontainer」と、インラインブロックで幅100％の背景ラインdiv「backgline」を持つことです。これはhtmlの例です

<div class="bgcontainer">
  <div id="backgline"> 
  <img src="images/images/backgroundfragments_01.jpg" alt="Translation games"><!--
  --></div>
  <div id="backgline"><!--
  --><img src="images/images/backgroundfragments_02.jpg" alt="Translation games"><!--
  --><img src="images/images/backgroundfragments_03.jpg" alt="Translation games"><!--
  --><img src="images/images/backgroundfragments_04.jpg" alt="Translation games"><!--
  --></div>
    <div id="backgline"> 
  <img src="images/images/backgroundfragments_05.jpg" alt="Translation games"><!--
  --></div>

そして、これがcssで動作すると私が思ったものです

#bgcontainer{width:100%;
}
#backgline {

    background: rgb(0,0,0);
    display: inline-block;
    position: inherit;
    font-size: 0;
    text-decoration:none;
    top: 0; 
    left: 0;

    width : 100%;
    height:auto;


    /*min-height: 100%;
    max-width: 800px;
    min-width: 1280px; */


}

しかし、これはうまくいかず、画像が線に分割されます。フルライン画像 1920px は、background-cover で行うことができるように 100% を超えて拡大縮小することはなく、1 行の 3 つの画像は 2 行に分割され、ピクセル幅を超えて拡大縮小されることはありません。明らかに間違った方向に進んでいます。どのように進めればよいか分かりますか? または私が読むべき何か？前もって感謝します。

4

0 に答える 0