Как сделать фон с линиями 45 градусов с помощью CSS? - PullRequest
Новая
       11

Как сделать фон с линиями 45 градусов с помощью CSS?

1 голос
/ 02 сентября 2011

Используя CSS или CSS3, как сделать следующий фон?

background with 45 degree lines

Если возможно, я бы хотел поддержку ie6,7,8. Я могу использовать инструмент на основе JavaScript для имитации CSS3 для старых браузеров (например, css3pie).

Ответы [ 3 ]

2 голосов
/ 02 сентября 2011

Если возможно, я бы хотел поддержку ie6,7,8.

Используйте фоновое изображение. Даже если бы вы могли использовать чистый CSS3 для создания такого шаблона для фона (я очень сомневаюсь, что это возможно), не стоит хлопот использовать кучу библиотек JavaScript и так далее, просто чтобы заставить его работать в этих версиях IE.

1 голос
/ 02 сентября 2011

Я использую это. Тогда вы просто делаете background-image: url (blahblahblah.gif)

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

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

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

0 голосов
/ 02 сентября 2011

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

...