0

だから私は画像を持っています、私は画像の上に重ねられた透明な背景を持つテキストボックスを持っています（参考までに、アイテムの価格とそれが販売されているかどうかが含まれています）。テキストボックスが画像の幅に「収まる」ようにしたいと思います。現在、テキストは画像よりも幅が広くなっています。幅を調整してみましたが、幅を縮小してボックスを画像の上から移動するだけのようです。

http://jsfiddle.net/Ggqy4/

ここに私が作成しようとしているものがあります。テキストの幅が画像と同じであることに注意してください。 http://imgur.com/zKzjIyF

ボックス内の赤いボックスは、左側の最初の項目、ベストの女の子にあります。

HTML:

<div class="date-container">
<div class="date-heading" style="display: block;">Friday, Oct 11, 2013</div>
<div class="items-purchased-container">
    <DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px">3</span>&nbsp;items purchased</p>
    </div>
    <div class="total-spend-container">
        <div class="product">
            <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
            <div class="description">
                <p>Sex shirt in sparkly black <span class="price">Price $500</span>
                </p>
            </div>
        </div>
        <div class="product">
            <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
            <div class="description">
                <p>Sex shirt in sparkly black <span class="price sale">Sale Price $500</span>
                </p>
            </div>
        </div>

CSS:

body {
background:#00000;
text-align:center;
 }
.product {
display:inline-block;
position:relative;
margin-right:10px;
vertical-align:top;
}
.product img {
display:block;
max-width:100%;
}
.description {
position:absolute;
background:rgba(255, 255, 255, 0.75);
top:60%;
;
text-align:center;
width:100%;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}
4

1 に答える 1

0

レビュー用の JSFiddle ファイルは次のとおりです。 ここをクリック

Giovanni Silveira が前述したように、画像には大きな左右の境界線が含まれています。お気に入りの画像エディターでトリミングするか、コードを操作して、追加された領域を好みに合わせて調整する必要があります。

探している外観を強制するためにいくつかの変更を加えましたが、邪魔にならない設定が必要な場合は、ニーズに合わせて画像を変更することをお勧めします.

ページがどのように設定されたかを表示するには、追加するだけです

border: 1px solid #ccc;

製品と説明のクラスに追加して、フローを確認し、画像がドキュメントの流れに与える影響をよりよく理解してください。

お役に立てれば。

コードは次のとおりです。

HTML:

<div class="orderinfo">
    <div class="date">Friday, Oct 11, 2013</div>
    <div class="purchaseitems">3 items purchased</div>
</div>
<div class="total-spend-container">
    <div class="product">
        <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
    <div class="description">
        <p>Sex shirt in
            <br>sparkly black</br> <span class="price">Price $500</span>
        </p>
    </div>
</div>
<div class="product">
    <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
    <div class="description">
        <p>Sex shirt in
            <br>sparkly black</br> <span class="price sale">Sale Price $500</span>
        </p>
    </div>
</div>

CSS:

body {
    background: #00000;
    text-align: center;
}
.orderinfo {
    position: relative;
    width: 100%;
    min-width: 650px;
    font-family: "Courier", sans-serif;
    font-size: 20px;
}
.date, .purchaseitems {
    float: left;
    width: 49%;
    padding-bottom: 10px;
}
.total-spend-container {
    min-width: 650px;
}
.product {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 250px;
}
.product img {
    background-position: center;
    background-size: cover;
}
.description {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    font-family: "Courier", sans-serif;
    font-style: italic;
    top: 50%;
    text-align: center;
    left: 25%;
    width: 50%;
}
.description span {
    display: inline-block;
    margin-top: 10px;
    padding: 3px;
}
.sale {
    background: red;
    color: white;    
}
于 2013-10-17T23:57:58.913 に答える