divの左端の一部を削除する方法

Question

divの上に重なっている透明な背景の画像があります。

画像と重なっているdivの枠線の部分を削除するにはどうすればよいですか？ここで

は、私が探していますものです：ここでは

は、私がこれまでに得たものである：

.task-border { 
 
\t border: 1px solid #ccc; 
 
    padding: 10px 5px 15px 57px; 
 
} 
 
.task-border span { 
 
\t font-size: 1.5rem; 
 
    font-weight: bold; 
 
} 
 
.task-border p { 
 
\t 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%; 
 
}

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

Answer 1

z-index:0に画像urlとz-index:-1でbackground:#fffを追加... それがインデックスPRのように見える仕事

.task-border { 
 
\t border: 1px solid #ccc; 
 
    padding: 10px 5px 15px 57px; 
 
    position: relative; 
 
} 
 
.task-border span { 
 
\t font-size: 1.5rem; 
 
    font-weight: bold; 
 
} 
 
.task-border p { 
 
\t 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; 
 
}

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

Answer 2

編集ただに新しいCSSを追加しました.diamond:before{ background:#fff;} これはあなたが望むものですか？

.task-border { 
 
\t border: 1px solid #ccc; 
 
    padding: 10px 5px 15px 57px; 
 
    
 
    
 
} 
 
.task-border span { 
 
\t font-size: 1.5rem; 
 
    font-weight: bold; 
 
} 
 
.task-border p { 
 
\t 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%; 
 
}

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

Answer 3

ですオベレム。

ちょうど.diamond:beforeのように変更してください。

.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%; 
}