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 回答