воспроизводится ли эта кнопка изображения в кросс-браузере CSS?

Question

Привет, CSS-смекалка!

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

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

Возможно ли это? и как я должен идти, так как это немного сложная кнопка.

Большое спасибо:)

Answer 1

Это возможно , но не легко.Вы можете разбить его на следующие изображения:

1. Верхний левый угол
2. Верхний правый угол
3. Нижний левый угол
4. Нижний правый угол
5. Левая граница
6. Правая граница
7. Верхняя граница
8. Нижняя граница
9. Центр

Это называетсяметод "9-патч".Тем не менее, ваша нижняя граница содержит неотклоняемый свет.Вы также можете добавить еще 2 патча к этому:

1. Растягиваемые нижние левые пиксели между нижним левым углом и нижней границей
2. Растягиваемые нижние правые пиксели между нижним правым углом и нижнимborder

Затем вы можете обернуть эти элементы в inline-block div и использовать его в качестве кнопки.Также есть новое свойство border-image, которое вы можете использовать с CSS3, но оно пока не имеет хорошей поддержки.

Вы можете встроить шрифт с помощью @font-face.

Answer 2

Создайте изображение без текста, дайте id вашему input type="button" и value="search"

например

, если ваша кнопка

<input type="button" id="yourButtonId" value="search" />

Используя css, выберите вашу кнопку с id, как, input#yourButtonId и используйте свое изображение в качестве фона этой кнопки без повторения и правильного позиционирования, придавая кнопке свойство ширины и высоты точно так же, как фоновое изображение вашей кнопки, затем стилизуйте тексткак ваше желание с правилами CSS.

Answer 3

Что вы можете сделать, это сохранить границу кнопки как изображение (бит с эффектом тени / тиснения), а затем установить среднюю часть как градиент в CSS.Мало того, что вы можете поместить любой текст, который вы хотите, но эффект градиента может применяться для большинства браузеров.Отметьте this для создания ваших градиентов.

Обновление: Вместо создания изображения для каждого, почему бы просто не сделать спрайт?Сделайте внешнюю часть изображения фоном, затем получите другое большое изображение, которое содержит среднюю часть (часть с «поиском»), и просто измените положение фона на этом спрайте для каждого отдельного языка.

Answer 4

Создайте изображение для кнопки фиолетового фона (без текста) и используйте его в качестве фона для <input type='button' id='button_search' value='search'>.

CSS

input#button_search{
  background-image:url("imagename.png"); /*your image*/
  width:170px; /*width of your image*/
  height:43px; /*height of your image*/
  border:none;
  font-size:20px;
} 

Текст «Поиск» или на другом языке может быть установлен как value ввода.

Answer 5

Кросс-браузер очень субъективен и относителен. Если вы имеете в виду современные браузеры и не считаете IE, конечно. Если вы считаете IE 1-9, Netscape Navigator 4.1, старые браузеры Gecko и т. Д., То, конечно, нет. Сначала решите, кто является вашей демографической группой, а затем решите, стоит ли вам предоставлять меньшинству запасной вариант изображения или нет.

Answer 6

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