3

CSSスプライト画像がありfooter1.pngます。CSSを使用して画像の一部を切り取り、要素の背景として画像を並べて表示したいと思い.headimg3ます。

clipこれを実現するためにandプロパティを使用しようとしていますbackgroundが、画像がトリミングされていません。

.headimg3 {
  background: url(footer1.png) bottom;
  background-position: -35px -358px;
  background-repeat: repeat;
  height:34px;
  overflow: hidden; 
  clip: rect(0px, 200px, 0px, 400px); 
}
.headimgp {
  padding: 8px 0px 0px 10px;
  text-shadow: 2px 1px #fff;
}

<div class="headimg3">
  <div class="headimgp">
    &nbsp; LATEST Updates
  </div>
</div>

CSSのみを使用して背景画像をトリミングして並べて表示するにはどうすればよいですか？

4

1 に答える 1

8

CSSclipプロパティは、正しく機能するためにpositionのを持っている必要があります。absolute

.headimg3{
  background:url(footer1.png) bottom;
  background-position: -35px -358px;
  background-repeat: repeat;
  height: 34px;
  overflow: hidden; 
  position: absolute;
  clip: rect(0px, 200px, 0px, 400px); 
}

参照： CSSクリップのプロパティとデモ

注：
スプライト画像のセクションを使用して、そのセクションを繰り返すこと
background-repeatはできません。これは、画像全体を対象としているためです。

この場合、画像エディタを使用して必要なスプライトを切り取り、別の画像ファイルとして保存します。

于 2012-07-14T01:56:37.683 に答える