Question

我想知道如何使用css让一条线穿过徽标图像的中心。请参阅以下链接：

由于儒略

Answer 1

这是使用绝对定位的一种方法

<div>
    <div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
    <img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
    <div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>

example

Answer 2

这是一种方法，它使用绝对定位的跨度作为穿透，并使用带有跨度和图像的div来定位穿透，这里是working example

这是代码。

<div class="logo-container">
    <span class="logo-line"></span>
    <img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
    <span class="logo-line"></span>
</div>

的CSS：

.logo-container {
    position: relative;
    height: 87px;
    width: 35%;
    margin: 0 auto;
    min-width: 144px;
}

.logo {
    position: relative;
    width: 72px;
    height: 87px;
    z-index: 2;
}

.logo-line {
    position: relative;
    display: inline-block;
    top: -50%;
    width: 20%;
    height: 2px;
    background: #333;
}

Answer 3

这应该有效

<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>

我将每个div的相对位置设置为-20px，因为20是徽标图像高度的一半。因此，如果您的徽标图片SRC高度为80像素，则将两个div设置为top:-40px;

工作示例：http://jsfiddle.net/Edd6j/2/

使用css在徽标图像的左侧（中间）绘制一条线

3 个答案: