0

我试图在图像上覆盖一个半透明框。在那个盒子里，我希望底部的 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>
4

2 回答 2

0

建议的结构

JSFiddle 演示

HTML

<div class="product">
    <img src="http://lorempixel.com/output/fashion-h-c-250-480-10.jpg" alt=""/>
    <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <span class="price sale">Sale Price $500</span></p>
    </div>
</div>

CSS

.product {
    display:inline-block;
    position:relative;
    width:250px;
    margin-right:10px;
}
.product img {
    display:block;
}

.description {
    position:absolute;
    background:rgba(255,255,255,0.75);
    top:60%;;
    text-align:center;
    padding:5px;
}

.description span {
    display:block;
    margin-top:10px;
    padding:5px;
}
.sale {
    background:red;

}

随意根据需要进行调整。

于 2013-10-16T16:10:27.270 回答
0

很抱歉，您必须从头开始，然后才能有人帮助您并保持理智！这不是 HTML 代码应该看起来的样子。

这是一个基本结构：

<html>
    <head>
        <title>Page title</title>
    </head>

    <style>
        #example {
            color:red;
        }
    </style>

    <body>
        <div id="example"><p>Example Div Content</p></div>
    </body>
</html>
于 2013-10-16T15:57:57.127 回答