CSS 小于 100% 宽但仍然响应的 line-image-line？

Question

如何用 HTML/CSS 复制这样的东西？

其中：

我可以在中间放置一个图标或小图像。
反应灵敏，并根据我当前的断点运行。
（固定 - 宽度 80%，边距：0 自动） 横跨屏幕的线条不是 100% 宽度。

我找到了一些关于堆栈溢出的例子，但它们似乎并不完全符合我的目的。

不幸的是，这个示例 (found here) 正是我想要做的，但它是图片，所以我无法查看其下方的源代码。

我有下面的代码，但是你可以看到它有 2 个问题。

<div style="height: 1px; background-color: grey; text-align: center;">

<span style="position: relative; top: -2.25em; padding: 5px;"> 
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png' alt="text" style="width:80px;height:80px;"></span>

</div>

（另请参阅 this Fiddle）

1) 图像上的透明度使线条变为 'through' 它。有什么办法可以控制吗？

2) (fixed - width 80%, margin: 0 auto) 线端到端的宽度为 100%

谢谢！

编辑：修复了（宽度 80%，边距：0 auto）的宽度问题

Answer 1

试试这个并将相同的 background-color 分配给您的 icon .fa fa-heart-o 作为您的主要组成，即父级 div 的组成。因此，这会将您的 background-color 与您的 icon background-color.

合并

body{
  background:#111;
}
#line{
  width:100%;
  height:2px;
  background:#fff;
}
#line > .fa{
  position:absolute;
  top:0;
  left:45%;
  color:#f22;
  background:#111;
  width:50px;
  padding-left:40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div id="line">
<i class="fa fa-heart-o"></i>
</div>

如果您打算在图像上方添加该图标，则使用伪 ::before 和 ::after 选择器到您的父 div 创建左右边框和 background:transparent给你的图标。您需要调整元素的对齐方式，但这是对齐图标居中和背景透明的两种方式。

body{
  background:url('https://source.unsplash.com/random');
}
#line{
  width:100%;
  height:2px;
}
#line::before{
  content:'';
  width:45%;
  height:2px;
  background:#f22;
  position:absolute;
  left:0;
}
#line::after{
  content:'';
  width:45%;
  height:2px;
  background:#f22;
  position:absolute;
  right:0;
}
#line > .fa{
  position:absolute;
  top:0;
  left:42%;
  color:#f22;
  background:transparent;
  width:50px;
  padding-left:40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div id="line">
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</div>

Answer 2

我有点着急，不过试试这个，我回家后会修复居中问题

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }


.container{
  width:70%;
  margin:0 auto;
}

.left{
  margin:3% auto;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

img{
  margin:0;
  width:20%;
  float:left;


}

.right{
  margin:3% 0;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

html

<div class="container clearfix">
  <div class="left"></div>
  <div class="img"></div>
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png'>
  <div class="right"></div>
</div>

CSS 小于 100% 宽但仍然响应的 line-image-line？

CSS line-image-line that's less than 100% wide, and still responsive?

html

css

frontend