2

css でクリッピング マスクを作成しようとしましたが、間違った方向に進んでいると思います。これは、私がhtmlに変換しようとしている画像です..

ここに画像の説明を入力

自分の側で試してみたところ、混乱しているように見えます。 ここに画像の説明を入力

CSS: 

.img_nav_individual {
    float: left;
    border: 3px solid #fff;
    margin-left: 8px;
    outline: 1px solid #c1cacf;
    max-width: 96px;
}

.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }

HTML: 

<div class="img_nav_individual"> <img src="img/parents1.png" />
  <div class="image_nav_text"> <span>parents</span> </div>
</div>

提案は大歓迎です。ありがとう！

4

4 に答える 4

2

overflow:hidden;img_nav_individual の属性を使用する必要があります。ここで役立つのはあなたの例です: http://jsfiddle.net/6wPvW/

于 2014-07-04T09:07:28.973 に答える
0

コード/技術に集中する必要があることはわかっています。しかし、HTMLページで使用する前にこれらの画像を切り取ってみませんか？この方法は簡単で早いと思います！

于 2014-07-04T09:31:20.223 に答える