Наложение изображений и текста

Question

У меня есть привязанный тег, и я хочу установить фон метки привязки значком в зависимости от ситуации.

Так у меня есть следующие классы: -

/* Folder Icons CSS */ 
.FolderOpen { 
    width: 150px; 
    height: 50px; 
    background-image: url(../images/icon_folder_24x24.png); 
    background-repeat:no-repeat; 
    overflow: hidden; 
} 

.FolderClose { 
    width: 150px; 
    height: 50px; 
    background-image: url(../images/icon_folder_24x24_closed.png); 
    background-repeat:no-repeat; 
    overflow: hidden; 
} 

размеры изображений являются 24x24

у меня ахор тег следующим образом: -

<a class="showFilesForFolder FolderClose" data-folderid="@folder.FolderId" data-personid="@Model.PersonId" style="cursor:pointer; text-decoration:none;"> <span>@folder.FolderName</span></a><br /> 

Образ не отображается на всю высоту и ширину.

Можете ли вы, пожалуйста, помочь мне, чтобы текст doenot накладывался на изображение и изображение хорошо отображалось?

Заранее спасибо

Answer 1

Вы можете играть с отступом (в данном случае, влево) и положением фонового изображения, чтобы дать место для текста привязки не перекрываться.

HTML

<a class="showFilesForFolder FolderOpen"><span>Folder open</span></a> 
<br /> 
<br /> 
<a class="showFilesForFolder FolderClose"><span>Folder close</span></a> 

CSS

a { 
    cursor: pointer; 
    text-decoration: none; 
    display: inline-block; 
    // The trick is here: 
    padding-left: 30px; 
} 

/* Folder Icons CSS */ 
.FolderOpen { 
    width: 150px; 
    height: 50px; 
    // Position your background image 
    background: url("http://www.thenetadvantage.co.uk/wp-content/themes/netadvantage/images/icon-linkedin.png") no-repeat top left; 

} 
.FolderClose { 
    width: 150px; 
    height: 50px; 
    // Position your background image 
    background: url("http://computer-forensics.sans.org/images/design/custom/icons/twitter-icon.png") no-repeat top left; 
} 

Рабочий пример: http://jsfiddle.net/qg7Ns/2/

Answer 2

у вас есть jsfiddle, чтобы ясно видеть?

Почему вы просто не плаваете текст вокруг изображения?

Answer 3

Используйте обивку и/или текст отступ, скрипку отступов, чтобы соответствовать вашим потребностям,

padding: 5px 5px 5px 10px; 

Перетяжка идет от верхней по часовой стрелке налево, так что сверху, справа и снизу накладки в примере устанавливается 5 px, левое заполнение до 10.

Answer 4

пытаются использовать display: block на якорь тег.

Answer 5

Используйте это:

.folderClose { 
    display:inline-block; 
    width:40%; 
    height:50px; 
    text-align:center; 
    background-image: url('../images/icon_folder_24x24_closed.png'); 
    background-repeat:no-repeat; 
    overflow: hidden; 
} 

Это работает, я надеюсь.

Answer 6

вы должны использовать тег изображения внутри своего якорного тега. Затем вы можете установить css, чтобы получить правильную позицию текста и изображения.