скрытый фон изображения

Question

У меня есть следующие css и html. Я пытаюсь скрыть фон изображения, чтобы вы просто видели изображение без окружающего его пробела. Примечание: я нооби с css, поэтому, пожалуйста, будьте осторожны. лол

.boxcontainer { 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background-color: rgba(0, 0, 0, 0.4); 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

} 

HTML:

<div class="boxcontainer"> 
<div id="head1" ><b><u>Test</u></b></div> 
<div class="boxstatus boxwithicon"> 
<img src="images/smrsfolderopen.png" alt=""><a href="http://localserver/page">Customers</a> 
</div> 
</div> 

Так что я получаю мое изображение с белым фоном, показывая в блоке изображения. Точно так же, как с любым изображением, у вас есть свободное пространство вокруг фактического изображения. Я не хочу, чтобы это появилось. Надеюсь, я объясню это правильно.

-DND

Я думаю, что мы все на той же странице. Теперь, когда я исследую другие веб-сайты, которые используют изображения, они также имеют белый фон, когда я просматриваю сам образ, но когда он отображается на веб-сайте, он прозрачен. Например, проверьте этот сайт: link text и нажмите кнопку «Простой пример». вы увидите значок рядом с текстом в поле. Как сделать белый фон прозрачным?

Благодаря

Answer 1

Если у вас есть изображение с белым фоном, я бы открыть PNG в Photoshop и удалите фоновый слой, а затем сделать его прозрачным PNG. Таким образом, фон за изображением пройдет.

Answer 2

.boxcontainer { 
    background: transparent;// you actually want to make sure you're not overriding this in any other elements further up the DOM 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background: transparent;// and NOT a set color. that would make it NOT be transparent... 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

} 

Answer 3

Вам необходимо отредактировать свое изображение и сделать фон прозрачным.

Обратите внимание, что он не будет работать в IE6, unless you use a filter.

Answer 4

Png файлы имеют возможность иметь прозрачность. Но это не означает, что изображение имеет любой набор прозрачности. Сначала я проверил изображение, чтобы узнать, что случилось.

Помимо этого я не вижу ничего, что могло бы вызвать пробелы ... В вашем коде не должно быть никаких стилей, нацеленных на само изображение.

Не стесняйтесь следить за вопросами, и я буду рад помочь вам устранить неполадки.