Создание кнопки отправки изображения с помощью CSS

Я рассмотрел похожие вопросы, связанные с этим, но я не могу найти никого, имеющего такую же проблему.Создание кнопки отправки изображения с помощью CSS

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

HTML

<input type="submit" class="search" alt="search" >

CSS

input.search { 
background-image:url(../search-icon2.png); 
width:35px; 
height:35px; 
}

Это возвращает разбитое изображение на веб-странице, даже если изображение "поиск-icon2.png" точно 35px 35px х и в правильном месте на сервере.

Если кто-нибудь может предложить, в чем проблема, было бы весьма полезно.

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

источник

2014-01-03 JCW

Если он возвращает сломанное изображение, то ваш путь неправильный, проверьте, что изображение находится в этом каталоге – jmore009

где находится «search-icon2.png»? –

'url (../ search-icon2.png);' mean 'search-icon2.png' файл в папке, которая находится на одном уровне от того, где находится ваш файл CSS. –

Вы можете добавить изображение в то же место, что и файл css, с CSS, имеющим url ('search-icon2.png'). Это подтвердит, что ваш путь действительно правильный, и это не другая проблема. Если у вас все еще есть проблема, возможно, проверьте орфографию изображения?

источник

2014-01-03 03:25:55 alfranz33

Я только что пробовал это, но получаю тот же результат, без изображения, просто кнопка отправки текста. – JCW

Какой браузер вы используете? – alfranz33

Возможно, попробуйте – alfranz33

HTML

<a class="buttonImage"> 
    <span class="left_img"> Hello this is coding 
    </span> 
    <span class="right_img"></span> 
</a>

CSS

.buttonImage { 
    display:inline-block; 
    vertical-align:top; 
    text-decoration:none; 
} 
.buttonImage .left_img { 
    background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0; 
    float:left; 
    line-height: 15px; 
    padding: 7px 0 5px 8px; 
    color: #1b1d60; 
    cursor: pointer; 
} 
.right_img { 
    background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0; 
    float:left; 
    height: 27px; 
    width:7px; 
    cursor: pointer; 
} 
.buttonImage:hover .left_img, .buttonImage:hover .right_img { 
    background-position:0 -26px; 
    color:#fff; 
}

Fiddle Demo

источник

2014-01-03 03:29:43

Это будет нормально работать только следующие шаги: Поиск размер изображение кнопки не должно превышать того, что вы инициализируете ширину и высоту в правиле css. Это означает, что если вы даете ширину: 100 пикселей и высоту: 30 пикселей, изображения должны быть одинакового размера. Просто измените размер изображения с помощью программного обеспечения для редактирования изображений. Мои личные предпочтения - это Adobe Photoshop. Если ваш размер изображения больше, чем правило css поэтому изображения могут не появиться или изображение будет нарушено. Я отредактировал ваш html, а также css.

<!DOCTYPE html> 
<html> 
     <head> 
     <style> 
      input.search{ 
       background-image:url(url.jpg); 
       text-indent:-9999px; 
       width: 100px; 
       height: 30px; 
       border:2px solid rgb(0,102,153); 
      } 
     </style> 
     </head> 

     <body> 
     <input type="submit" class="search" alt="search"> 
</body> 
</html>

enter image description here

Надежда ответ!

источник

2014-01-03 03:59:28

Создание кнопки отправки изображения с помощью CSS

ответ

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