我正在尝试制作一个中间有图像的分隔符。这也是响应式的。
我无法在行中间以全尺寸显示图标/图像。它似乎切断了顶部和底部。有人可以看一下代码吗?
<div class='line-icon'></div>
.line-icon {
text-align: center;
background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png');
background-repeat: no-repeat;
background-position: center center;
}
.line-icon::before, .line-icon::after {
width: 25%;
height: 1px;
border-top: 1px solid #837048;
display: inline-block;
content:'';
padding-top: 0.5em;
margin-left: 5%;
margin-right: 5%;
}
最佳答案
这就是你想要得到的。查看结果
.line-icon {
box-sizing: border-box;
position:relative;
text-align: center;
background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png');
background-repeat: no-repeat;
background-position: center center;
font-size:0;
height: 40px;
}
.line-icon::before, .line-icon::after {
box-sizing: border-box;
width: 40%;
height: 1px;
border-top: 1px solid #837048;
display: inline-block;
content:'';
margin-left: 5%;
margin-right: 5%;
position:relative;
top: 50%;
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
}
<div class='line-icon'></div>
关于html - 中间带有图像图标的分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32992253/