0

白い背景から画像の背景へのトランジションを作成しようとしています。このように、視聴者がセクションにカーソルを合わせると、プレーンからスタイル付きに変わります。

これが私の現在のコードです：

div.camp {
     background: #FFFFFF;
      border: 1px solid #CCCCCC; 
      border-radius: 8px; 
     padding: 8px; 
      transition: all 1s linear 0s;
  }
div.camp:hover {
      background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png"); 
        background-position: center bottom; 
       background-repeat: repeat-x; 
    border: 1px solid #CECECE;
  }

このコードがあるページは次のとおりです: http://www.summitpost.org/eldorado-peak/150316#chapter_7

私が理解していることから、背景色の遷移は簡単です。しかし、背景画像はトランジションではサポートされていないようです。

4

2 に答える 2

4

残念ながら、指定した方法で背景画像にトランジションを使用することはできません。アニメーション プロパティ タイプの W3C リストは、こちら で確認できます。

白い背景を上に置き、ホバー時にその不透明度をアニメーション化することができます (下の画像を表示するため)。

コードサンプル

明らかにこれをもっときれいにすることができます。アイデアを提供するために、何かをまとめてみました。

div.camp {
  border: 1px solid #CCCCCC; 
  background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png"); 
  background-position: center bottom; 
  background-repeat: repeat-x; 
  border-radius: 8px; 
  position: relative;
}

div.camp-overlay {
  padding: 8px;
  border-radius: 8px;
  position: absolute;
  z-index:50;
  width: 100%;
  height: 100%;
  background:white;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

div.camp-overlay:hover {
  background: rgba(255,255,255,0);  /* use opacity for older browsers*/
}​​​​​​​​​​​​​

上記CSSのHTML

<div class="camp">
    <div class="camp-overlay"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

上記の JSFiddle

http://jsfiddle.net/p7mcy/

于 2012-12-18T07:47:43.543 に答える
1

できることは、2 つの div 要素を重ねて作成し、ホバー時に一番上の div をフェードアウトさせることです。

<div class="wrapper">
    <div class="image"></div>
    <div class="white-bg"></div>
</div>

.wrapper{position:relative;}
.image, .white-bg{position:absolute; top:0; left:0; width:100px; height:50px;}
.image{background:red;}
.white-bg{background:white; z-index:9999; -webkit-transition:opacity 0.3s linear; opacity:1;}
.white-bg:hover{opacity:0;}​

フィドルを動作させる必要があります: http://jsfiddle.net/b46z8/5/

于 2012-12-18T07:56:32.070 に答える