我试图在图像上覆盖一个半透明框。在那个盒子里,我希望底部的 1/4 是红色的(表示在销售中购买的物品)。到目前为止,我有图像,图像上有一个半透明的白框。
目前有 2 件事: 1. 我如何将框的底部约 1/4 设为红色 2. 我如何分离/设置我拥有的文本的样式,以便价格出现在红色区域的框底部(如果出售) ,并且描述出现在上面,就像下面的参考图片一样。
我是否需要在图像周围创建一个框架或填充以确保框浮动在同一个地方?
Jfiddle:http: //jsfiddle.net/3S9Dg/
我设计的东西我正在努力模仿以供参考:http: //imgur.com/zKzjIyF
盒子里面的红框在左边第一个项目,背心的女孩。
<DIV style="position: absolute; top:265px; left:125px; width:200px; height:25px"><p>Sex Dress <span id="u186-2">IN </span></p>
<p><span id="u186-4">Purple rain</span> <div class="Cash-Money" id="u187-4">
<p>Price : $455</p></DIV></p>
</div>
<div style="position: absolute; top:165px; left:40px">
<style>
div.transbox
{
width:150px;
height:65px;
margin:30px 50px;
background-color:#ffffff;
border:0px solid black;
opacity:0.81;
filter:alpha(opacity=81);
}
div.transbox p
{
margin:30px 40px;
font-weight:italics;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p><font size="1">Magic Sex Shirt In Shizam
Price: $265</font>
</p>
</div>
</body>