在 <td> HTML 上稍微覆盖图像答案

【问题标题】：Slightly overlay an image over <td> HTML在 <td> HTML 上稍微覆盖图像
【发布时间】：2014-06-10 05:39:23
【问题描述】：

我有以下 HTML 标记，用于显示产品类别列表

HTML：

<ul data-bind="foreach: Combos" style="margin: 0; padding: 0; color: White;">
    <li id="comboItem" style="list-style-type: none;">
        <table style="width: 100%; height: 100%; margin-bottom: 10px;" data-bind="click: $root.selectCombo">
            <tr>
                <td style="height: 30px; background-color: #0089d1;">
                    <table style="width: 100%;">
                        <tr>
                            <td style="height: 25px; padding-left: 10px; font-weight: bold; background-color: black;
                                color: #0089d1; margin: 1px; width: 70%;">
                                <span data-bind="text: Description" />
                            </td>
                            <td style="color: Black; width: 30%; text-align: center;">
                                <span data-bind="text: formatCurrency(Price)" style="font-size: 13px; white-space: nowrap;
                                    font-weight: bold;" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </li>
</ul>

创建以下输出：

现在我需要添加一个与包含产品描述的 td 元素略微重叠的图像，以创建以下效果：

我非常感谢有关如何做到这一点的任何提示

【问题讨论】：

我个人会避免使用表格。坚持使用li，将图像作为li 的背景，使用div 或span 作为其他元素。

标签： css html asp.net-mvc-4 c#-4.0

【解决方案1】：

我更改了您的代码！见JSFIDDLE

CSS：

li{
    padding-bottom:25px;
}
table{
    border-collapse:collapse;
}
table tr img{
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-10px;
    margin-top:-10px;
}

HTML：

<li id="comboItem" style="list-style-type: none;">
        <table style="width: 100%; height: 100%; margin-bottom: 10px;" data-bind="click: $root.selectCombo">
            <tr>

                <td style="height: 30px; background-color: #0089d1;">
                    <table style="width: 100%;">
                        <tr>
                            <img src='https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-32.png' />
                            <td style="height: 25px; padding-left: 10px; font-weight: bold; background-color: black;
                                color: #0089d1; margin: 1px; width: 70%;">
                                <span data-bind="text: Description" />
                            </td>
                            <td style="color: Black; width: 30%; text-align: center;">
                                <span data-bind="text: formatCurrency(Price)" style="font-size: 13px; white-space: nowrap;
                                    font-weight: bold;" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </li>

【讨论】：

【解决方案2】：

这是一个使用纯 css 的解决方案（没有图像或更改您的标记）

li#comboItem{
    position:relative;
}
li#comboItem:before{
    position:absolute;
    content:"";
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0089d1;
    top:-5px;
    left:-5px;
}
li#comboItem:after{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    top: 9px;
    left: 15px;
}

还有 JS 小提琴 - http://jsfiddle.net/4k7Fa/

【讨论】：

【解决方案3】：

彻底清理改变你的标记：

<ul data-bind="foreach: Combos" style="margin: 0; padding: 0; color: White;" id="comboItems">
    <li>        
        <span data-bind="text: Description" class="description">Description</span>
        <span data-bind="text: formatCurrency(Price)" class="price">R 38.99</span>
    </li>
    <li>        
        <span data-bind="text: Description" class="description">Description</span>
        <span data-bind="text: formatCurrency(Price)" class="price">R 38.99</span>
    </li>
</ul>

使用以下 CSS（从 @rub0123 窃取的圆圈）：

#comboItems
{
    list-style-type: none;
}

#comboItems li
{
    height: 30px;
    margin:30px 0;
    position:relative;
    background-color:#000;
    line-height:30px;
    padding-left:50px;
    border-top: solid 3px #0089d1 ;
    border-bottom: solid 3px #0089d1 ;
    margin-left:5px;
    color:#0089d1;
    font-weight:bold;       
    clear:both;
}

li .price
{
    display:block;
    background-color:#0089d1;
    color:#000;
    width:30%;
    text-align:center;
    float:right;


}


#comboItems>li:before{
    position:absolute;
    content:"";
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0089d1;
    top:-11px;
    left:-10px;
}
#comboItems>li:after{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    top: 3px;
    left: 10px;
}

Demo

您可能希望使用#comboItems>li:before（圆圈）和#comboItems>li:after（箭头）中的top 值来获得更好的定位。

【讨论】：