background-image property

Я не могу найти свойство background-image для работы. Я пытаюсь добавить изображения к границам моей кнопки, но он не работает. Вот http://jsfiddle.net/Bchga/.background-image property

HTML

<a href="#" class="btn">Image Borders</a>

CSS

a { 
    text-decoration: none; 
    color: #fff; 
} 

.btn { 
    float: left; 
    display: block; 
    padding: 10px 30px; 
    background-color: #67b8de; 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") no-repeat right bottom; 
}

источник

2013-10-14 Anonymous

Ваш background-image правило также содержит значения для background-repeat и background-position. Отделить их (или вы можете поместить цвет слишком и использовать background стенографии):

background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"); 
background-repeat: no-repeat; 
background-position: right bottom;

источник

2013-10-14 13:51:21 Ryan

Это не решает проблему, хотя. –

@htmltroll: Это просто вопрос, что ваш образ слишком велик. Вы хотите его масштабировать? – Ryan

Я думал об одном и том же, но приклеивал все к одному свойству 'background'. В любом случае, это тоже не сработает. – melancia

Хорошо Подхожу документации на https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Новый CSS

.btn { 
    float: left; 
    display: block; 
    padding: 10px 30px; 
    /* Notice that I list all the images */ 
    background: url("../img/border-top-left.png"), url("../img/border-top-right.png"), 
       url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png"); 
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; 
    background-position: top left, top right, bottom left, bottom right; 
    background-color: #67b8de; 
}

Вы заметят, что я использую свойство background:, вы также можете использовать свойство background-image, спасибо за отзыв minitech. Вы также должны заметить, что вы не можете просто указать индивидуальное изображение, вы хотите настроить таргетинг на все углы кнопки. Пример:

background-image: url("../img/border-blah-blah.png"); 
background-repeat: no-repeat; 
background-position: top right;

Это не будет предназначаться все ваши углы, но только один угол будет направлено это из-за каскада будет перезаписывать предыдущее правило, именно поэтому вы должны ввести источники для всех ваших изображений сразу и затем нацеливать их. Также вы должны поместить свойство background-color последним, потому что цвет не будет применяться, если это первое правило. Я не знаю, почему это происходит.

источник

2013-10-14 13:55:39

Причина, по которой вам пришлось помещать 'background-color' последним здесь, кстати , потому что вы использовали 'background' для первого, который также применяет« background-color ». Поэтому вы можете изменить это на «background-image» или написать «background: # 67b8de url (...), url (...), ...'. – Ryan

Я понимаю, это выглядит так очевидно, когда вы указали это –

фона Вы изображение слишком велико: он работает с фоновым изображением на 10% ..: Link JSFiddle

background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%

источник

2013-10-14 13:58:05 guillaumek

background-image property

ответ

Смежные вопросы