Question

我试图在图像上叠加一个半透明的盒子。在那个盒子里面，我希望底部的1/4是红色的（表示购买的商品）。到目前为止，我有图像，图像上有一个半透明的白框。

目前有两件事：1。我怎样才能使底部的1/4变为红色2.我如何分离/设置我所拥有的文字，以便价格出现在红色区域的框底部（如果销售），并且描述如上所示，如下面的参考图片。

我是否需要在图像周围创建一个框架或填充以确保盒子在同一个地方浮动？

我的设计是为了努力尝试模仿以供参考：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>

Answer 1

不好意思说，你必须从一开始就重新开始，然后才能有人帮助你并保持理智！这不是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>

Answer 2

建议的结构

JSFiddle Demo

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;

}

随意根据需要进行调整。

在图像上创建一个浮动框，另一个浮动框在另一个颜色HTML中

2 个答案: