スケッチせずに画像部分を

Question

私の通知箱に助けが必要です。

私は複数のアイコンを持つスプライトである背景イメージを持っています。私は電球だけが欲しい。テキストが大きくなる場合は、他のアイコンと背景を見ることができます。このスニペットで

.focus-info { 
 
    background: #fff5ec url("https://www2.pic-upload.de/thumb/32630279/sprite.png") no-repeat scroll 14px -1085px; 
 
    border: 1px solid #fd823e; 
 
    color: #d06124; 
 
    font-style: normal; 
 
    margin: 12px 0 0; 
 
    padding: 12px 12px 12px 48px; 
 
} 
 

 
.focus-info.notification { 
 
    background-color: #fefdf5; 
 
    border-color: #e3b600; 
 
    color: #b4920d; 
 
    display: block; 
 
}

<em class="focus-info notification">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 

 
<br><br>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</em>

：ここ

はスニペットです。 background-sizeを20x30pxに設定するにはどうすればよいですか？ボックス全体をサイジングしないでください。

ちょうどbackground-size: 20px 30pxを追加した場合、画像は拡大縮小され、電球はもう見えません。

アイコンだけの要素を追加したくありません。

Answer 1

背景に要素を追加しない場合は、:beforeを使用できます。

.focus-infoクラスに:beforeスタイルを追加し、その中に背景を設定します。

.focus-info:before { 
 
background: #fff5ec url(https://www2.pic-upload.de/thumb/32630279/sprite.png) no-repeat scroll 0px -1094px; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 25px; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 

 
.focus-info { 
 
    border: 1px solid #fd823e; 
 
    color: #d06124; 
 
    font-style: normal; 
 
    margin: 12px 0 0; 
 
    padding: 12px 12px 12px 48px; 
 
    position:relative; 
 
} 
 

 
.focus-info.notification { 
 
    background-color: #fefdf5; 
 
    border-color: #e3b600; 
 
    color: #b4920d; 
 
    display: block; 
 
}

<em class="focus-info notification">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 

 
<br><br>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</em>