X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Свободный доступ Премиум

Доступ всей нашей библиотеке Премиум Статьи концентратор, файлы проекта и первые 10% от каждого Учебник-Video из Интернет библиотека Учебник .

Создайте свой бесплатный аккаунт!

Настройка Плиточные обои с помощью CSS
  • Настройка Плиточные обои с помощью CSS

Перевод Google Translate

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Шаг 1

Первая вещь - мы должны графику плитки! Наверное, лучшее место, чтобы сделать это в Photoshop . Вы можете использовать смягчил графических, так что это будет выглядеть как водяной знак, логотип, или действительно все, что вы хотели бы. Убедитесь, что графика не слишком велика, и сохранить его как PNG, JPEG или GIF. Теперь мы готовы использовать его в наш макет.

Шаг 2

Далее, мы будем загружать графические в наш макет с помощью CSS. Это будет требовать немного ручного кодирования, но это не что-то слишком сложно осуществить. Во-первых, найти правила CSS, которые вы хотели бы применить фоновое изображение для. Это может быть ID селектор, который по контролю за дел элемент, классового господства, ни любые другие правила, которые вы, возможно, используется. В моем примере, я собираюсь применить фоновый рисунок, чтобы переопределить тела элемента.

Добавить в "фоновое изображение" собственность с последующей полной толстой кишки, то "URL". Затем в скобках, введите путь к графическим, а затем с запятой. Например, вот как выглядит мой код:

фонового изображения: URL (изображений / Background.png);

Обратите внимание, что мои графики, "Background.png" находится внутри папку под названием "образов". Не забудьте сохранить ваши файлы и просмотреть результат Вашей работы в вашем браузере. Обратите внимание, как фоновый рисунок плитки по умолчанию. Мы могли бы оставить все как есть, или продолжать настраивать вещи дальнейшее использование дополнительных свойств CSS.

Шаг 3

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

Шаг 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link