3

私はこれらが何と呼ばれているのか、そしてそれらを実装するためにどのライブラリを使用できるのかを正確に理解しようとしています。それとも、私が見たことのないストレートなCSSソリューションがあるのでしょうか。

基本的に、いくつかの画像の隅にラベルを追加したいと思います。「新品」または「無料」と書かれた色付きのリボンのように見せたいです。しかし、私はこれらのリボンが何と呼ばれているのか理解できないようです。次に例を示します（注：ラベルは右上隅にあります）。

編集：私は新しいユーザーなので、画像を投稿できません。ラメ。しかし、私はその背後にあるスパム対策の前提を理解しています。 代わりに、隅に「新しい」ラベルが付いたスライドショーの例へのリンクを次に示します。

http://www.slidesjs.com/

グーグルは「バッジ」を見つけましたが、それらはiPhoneバッジのように見え、それは私が望んでいるものではありません。これらは次のようになります。下のテキストの2つのセクションの右上にもある赤いバッジに注目してください。

編集：2番目の画像を削除しました。

検索中にこのリンクも表示しましたが、例で使用されているバッジは見苦しいです。

画像の隅にバッジを自動的に配置します。

ですから、自分で作成する必要があるのか​​、それともプラグインや既成のソリューションがあるのか​​、疑問に思っています。前もって感謝します！

4

3 に答える 3

2

これには Javascript は必要ありません。古き良きcssでそれを行うことができます。の線に沿った何か

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

別のコーナーに表示する場合は、上から下、左から右に変更できます。次のように、バッジを画像と同じ div に配置するだけです。

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

ああ、コンテナ div もposition: relative;そのposition: absolute内部が機能する必要があります。あなたがリンクしてくれたスライドショーの画像を使用したjsfiddleへのリンクは次のとおりです。

http://jsfiddle.net/ky2Ac/

画像の周りに白い境界線を追加したため、少し異なって見えますが、それは簡単です。ポイントはバッジです :) あとは、バッジに使用する透明な背景を持つ適切な画像を見つける必要があります (他に何と呼べばよいかわかりません)。

于 2011-07-30T19:14:22.457 に答える
0

これを行う簡単な方法は、バナーを画像として に配置してから、画像を のdivとして配置するbackground-imageことですdiv。

HTML

<div>
    <img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>

CSS

div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}

http://jsfiddle.net/jasongennaro/25cFh/1/

于 2011-07-30T19:14:43.657 に答える
0

シンプルなCSS。

バナー グラフィックを含む要素を作成し、HTML コードのルート (つまり、<body>タグ内で、他の要素内ではなく) に配置し、次のようにスタイルを設定します。

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

説明：

position:fixed- これにより、ブラウザ ウィンドウ内での位置が固定されるように設定されます。ページの残りの部分はスクロールできますが、バナーは移動しません。(ページの残りの部分と一緒に移動したい場合は、に変更しますposition:absolute;)

top:0そしてright:0- 彼らがやるべきだと思うことを正確に行い、バナーをページの右上隅に配置します。よろしかったらご自由bottomにお使いください。left少しインデントしたい場合は、次のように設定します( for ピクセルにright:5px;注意してください)。px

z-index:1000- これは、ページの残りの部分がどのようにレイアウトされているかによって、任意の値にすることも、完全に省略することもできます。これは、ページに配置した他のコンテンツの前にバナーが確実に表示されるようにするためです。

それが役立つことを願っています。

于 2011-07-30T21:04:35.150 に答える