All Articles Web
使用CSS设置平铺背景
Geoff Blake on Wed, April 27th | 0 comments
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 som

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选择符的控制一个div元素,一个阶级统治,或任何其他规则,您可能已经在使用。在我的例子中,我要申请重新定义body元素的背景图形。

添加在全结肠的“背景图像”属性,然后在“URL”。然后在括号中,键入您的图形的路径,后跟一个分号。例如,这里的如何,我的代码看起来:

背景图像:网址(图像/ Background.png);

请注意,我的图形,“Background.png”是位于一个文件夹名为内的“图像”。请务必将文件保存在浏览器中预览您的工作。请注意默认情况下,如何背景图形砖。我们可以离开,因为他们的东西,或继续自定义的东西再使用额外的CSS属性。

第3步

如果你想控制平铺的行为,您可以添加在“背景重复”属性。然后,您可以设置“重复”,“重复- X”,“重复- Y”或“不重复的值。” - X重复和重复- Y部队只能横向或纵向平铺,不重复,而不允许平铺。

第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!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: