如何删除div左边框的一部分

Question

我有一张透明背景的照片，它在div的顶部重叠。

如何删除与图片重叠的div边框部分？

以下是我要找的内容：

这是我到目前为止所得到的：

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat;
    z-index: -1;
    position: absolute;
    left: -4.7%;
    top: 10%;
}

	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

Answer 1

将background:#fff与图片url和z-index:-1添加到z-index:0 ... 它的工作

＆＃13;

＆＃13;

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
    position: relative;
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") #fff 0 0 no-repeat;
    z-index: 0;
    position: absolute;
    left: -32px;
    top: 50%;
    margin-top:-32px;
}

＆＃13;

	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение. это индивидуальность фирмы, вынесенная на обозрение. это индивидуальность фирмы, вынесенная на обозрение.это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

已修改刚刚将新css添加到.diamond:before{ background:#fff;} 这就是你想要的？

＆＃13;

＆＃13;

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
 
   
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat #fff;
    z-index: 9999;
    position: absolute;
    left: -4.7%;
    top: 10%;
}

＆＃13;

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

看起来像索引问题。

只需像这样更改.diamond:before css;

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat;
    z-index: 1;
    position: absolute;
    left: -4.7%;
    top: 10%;
}