2016-01-16 4 views
1

У меня есть модуль, и я пытаюсь изменить размеры кнопок, используемых в модуле, чтобы они соответствовали более крупному изображению. Также как я могу масштабировать изображение, чтобы он соответствовал конкретным размерам кнопок? Вот код CSS, который я использую для кнопок. Изображения кнопок импортируются через значок «Значок» и значок «Удалить». Это изображение с иконками, которые импортируются atm: IMAGE1. Я хочу, чтобы заменить тех, с моим владельцем кнопки, которые являются:. this для upvote и img3 для downvote (масштабированно-, чтобы они поместились на кнопку, как кнопка «Locked» для сообщенийКнопки изменения размера в phpBB

dl.thanks { 
    min-height: 35px; 
    background-position: 10px 50%;  /* Position of folder icon */ 
    background-repeat: no-repeat; 
} 

dl.thanks dt { 
    padding-left: 45px;     /* Space for folder icon */ 
    background-repeat: no-repeat; 
    background-position: 5px 95%;  /* Position of topic icon */ 
    width: 45%; 
} 

dd.lastpostthanks { 
    width: auto; 
    font-size: 1.1em; 
} 
dd.lastpostthanks span { 
    display: block; 
    padding-left: 5px; 
} 
/* List in forum description */ 
dl.thanks dt ol, 
dl.thanks dt ul { 
    list-style-position: inside; 
    margin-left: 1em; 
} 

dl.thanks dt li { 
    display: list-item; 
    list-style-type: inherit; 
} 
li.header dl.thanks { 
    min-height: 0; 
} 

li.header dl.thanks dt { 
    /* Tweak for headers alignment when folder icon used */ 
    padding-left: 0; 
    padding-right: 50px; 
} 

/* Forum list column styles */ 
dl.thanks { 
    min-height: 35px; 
    background-position: 10px 50%;  /* Position of folder icon */ 
    background-repeat: no-repeat; 
} 

dl.thanks dt { 
    padding-left: 45px;     /* Space for folder icon */ 
    background-repeat: no-repeat; 
    background-position: 5px 95%;  /* Position of topic icon */ 
} 

/* Icon images 
---------------------------------------- */ 
.icon-thanks   { background-image: url("./images/icon_thanks.gif"); background-repeat: no-repeat; } 
.icon-thanks_toplist { background-image: url("./images/icon_thanks_toplist.gif"); background-repeat: no-repeat; } 


/* Profile & navigation icons */ 
.thanks-icon:before 
{ 
    width: 60px; 
    background-position: -3px -1px; 
    background-image: url("./images/icons_button_likes.png"); 
} 
//.thanks-icon:hover:before{ background-position: -3px -19px; } 

.removethanks-icon:before 
{ 
    background-position: -18px -2px; 
    background-image: url("./images/icons_button_likes.png"); 

} 
.removethanks-icon:hover:before {background-position: -18px -20px; } 

.thanks_reput_image_back 
{ 
    background: url(../../../images/rating/reput_star_back.gif); 
    background-repeat: repeat-x; 
} 
.thanks_reput_image 
{ 
    background: url(../../../images/rating/reput_star_gold.gif); 
    background-repeat: repeat-x; 
} 

Благодаря

+0

Отредактировано ....... – bogdanb

+0

Я отредактировал его еще раз, чтобы быть более явным. Извините за начальную запись – bogdanb

ответ

1

Вы можете. добавьте background-size:cover;, чтобы увеличить фоновое изображение настолько, насколько возможно, чтобы область фона

+1

О, ну, спасибо для этого! – bogdanb

+0

но как вы можете ale мои изображения, чтобы они соответствовали определенной кнопке? или просто нужно сделать это прямо в Photoshop и использовать то, что вы сказали вместо этого? – bogdanb

+1

Если вы хотите поменять изображение 'cover' на' содержать' (масштабируйте изображение до самого большого размера, чтобы его ширина и высота могли вписываться в область содержимого) –

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