2

評価表示用の星印について質問があります。私はコードを持っています

<style>
    .goldstardiv { color: gold; }
    .goldgraystardiv { color: khaki; }
    .graystardiv { color: gray; }
</style>
<div class="goldstardiv">&#x2605;</div>
<div class="goldgraystardiv">&#x2605;</div>
<div class="graystardiv">&#x2605;</div>

灰色の左サイトと黄色の右サイトを持つスターをcssで表示する方法は?

ありがとうございました

4

3 に答える 3

4

色付きの星の上に、半分灰色の星 (幅 50% オーバーフローが非表示) の div を配置します。

HTML:

<div class="goldstardiv">
    &#x2605;
    <div class="halfstar">&#x2605;</div>
</div>

CSS:

.goldstardiv { color: gold; position: relative; }
.halfstar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;    
    color: #666;
    overflow: hidden;
}

ハーフスター付きはピクセル単位で与えられますが、必要に応じて％で取得するためにいじってください.

例: http://jsfiddle.net/LV7SS/2/

于 2012-12-03T12:42:05.857 に答える
2

純粋な CSS でこれを行う唯一の方法は、このような厄介なハックを使用することですが、これは実際には理想的ではありません。これは、負の margin( margin-left: -104px;) を使用して、グレーの div をゴールドの div の上に配置します。

画像とスプライトを使用したほうがよいでしょう

于 2012-12-03T12:34:40.100 に答える
1

次のように、CSS で content:after プロパティを使用して、灰色の星の上に 2 つ目の金の星を表示することで、これを行うことができます。

<style type="text/css">
.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.gray { color: gray; }​
</style>

<div class="star gold">&#x2605;</div>
<div class="star gold-gray">&#x2605;</div>
<div class="star gray">&#x2605;</div>​

これが適切に機能するためには、サイズを具体的に指定する必要があります。これにより、ハーフスターに負のマージンを正しく設定し、overflow:hidden を使用して半分の幅で切り取ることができますが、目的は実行されます。

(この例では font-size を指定していません。指定したい場合もあります)

この手法の利点は、ハーフスター用に html に追加のマークアップを必要とせず、正しいクラスだけを追加する必要があることです。

編集

どういうわけか、jsFiddle への間違ったリンクを貼り付けました。以前のバージョンから、まだソリューションをハッキングしていました。

ここで動作することを確認してください。

編集2

シマノンは星が「実際にはコンテンツではない」と述べましたが、これはまったく真実ですが、質問が問題のCSSソリューションを求めていたため、考えられるすべての組み合わせでスプライトマップを必要としないソリューションを作成しました.

スプライト マップに対して何かを持っているからではありません。

各星の要素も<span>含まれていますが (避けるのは難しい)、それ以外はすべて優れたマークアップであり、スクリーン リーダーにはかなりうまく機能すると思います。

ここでチェックしてください。

<style type="text/css">
.stars .label {
    width: 1px;
    color: transparent;
    overflow: hidden;
    position: absolute;
}
.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star:before {
    display: inline-block;
    content: '\2605';
}
.star.on { color: gold; }
.star.half { color: gray; }
.star.half:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.off { color: gray; }​
</style>

<div class="stars">
    <span class="label">One and a half start (out of three)</span>
    <span class="star on"></span>
    <span class="star half"></span>
    <span class="star off"></span>
</div>​
于 2012-12-03T12:42:13.673 に答える