2

多くの写真がリストされているHTMLページがあります。一部の写真に、ここで「注目」と呼ばれる赤いストライプのような上部の「マーカー」が表示されるように、CSSを実行する方法についてのヘルプを探しています。

http://www.logospire.com/logos/3922

ここに画像の説明を入力してください

これが何であるかをグーグルで検索することもできましたが、キーワードがわかりません。ヒントやポインタがあればいいのにと思います。

4

4 に答える 4

3

リンクしたページでは、で解決されているbackground-imageので、単なる画像です。Chrome Inspector / Firebug / IE Developer Tools/DragonFlyなどを使用して要素を検査できます。

HTML：

<a id="featured" href="/?sort=featured"></a>

CSS：

#featured {
    display: block;
    width: 94px;
    height: 78px;
    background: url(/images/featured_bg.png) no-repeat;
    position: absolute;
    z-index: 10;
    top: -2px;
    left: -2px;
}

CSS3 Transforms（具体的にはRotation）を使用して、このようなことを実現することもできます。

于 2012-07-25T12:58:49.127 に答える
2

昨日css3を使って読んだ良い記事。

http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

于 2012-07-25T13:13:29.913 に答える
1

http://fusioncold.blogspot.co.uk/2011/06/text-rotate-with-css.html

あなたはそのリンクから始めることができます、そしてあなたがより多くの助けを必要とするならばさらにキーワードをグーグルで検索してください

于 2012-07-25T12:58:38.757 に答える
1

メイン画像を、相対的な位置と「1」のzインデックスを持つdivに配置するだけです。

次に、小さなコーナー画像もdivに配置し、top：0 left：0、z-indexが「2」のように絶対位置にします。

例のように箱から少し外して置きたい場合は、左右の位置を少し負の値にします。

于 2012-07-25T13:02:37.240 に答える