VML polar path tutorial (9) background of background

Source: Internet
Author: User
Navigation of this series of articles

VML polar path tutorial (1) Introduction to VML

VML polar path tutorial (2) getting started with VML

VML polar path tutorial (3) Marking practice and line

VML polar path tutorial (4) oval circle rect rectangular

VML polar path tutorial (5) RoundRect circle shape

VML polar path tutorial (6) image

VML polar path tutorial (7) polyline multi-side

VML polar path tutorial (8) shape multiple sides. shapetype template. shape and curve

VML polar path tutorial (9) background of background

VML polar path tutorial (10) group collection container. vmlframe graphic reference

VML polar path tutorial (11) 2-level mark stroke border, shadow

VML polar path tutorial (12) VML programming finale

Background VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 15: background

1: background-Details
You may have been wondering how the yellow and white gradient backgrounds on the content pages of "VML polar path tutorial" are made? In fact, it is very simple. The background (webpage background control mark) mentioned in this chapter is used to complete this task.
Before explaining how to do this, please compare the following code differences and do not need to be memorized!
Example of parallel gradient filling: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "yellow">
<V: fill type = 'gradient' color2 = "purple"/>
</V: background>

Example of refraction gradient filling: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill type = 'gradientradial 'color2 = "red"/>
</V: background>

Example of parallel gradient + Angle Adjustment: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill angle = 50 type = 'gradient 'color2 = "yellow"/>
</V: background>

How is it? The third example is a bit similar, right? But not yet. See the following example.
Example of parallel gradient + Angle Adjustment + contrast and melting: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML );} </STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill angle = 50 type = 'gradient' colors = "50% # f1f0c7"/>
</V: background>

OK. The fourth example is finally implemented! Looking back at the above four examples, one conclusion is that the code is "similar ". In addition, the VML second-level mark-fill (fill) is used, while the background mark itself only has the id and fillcolor attributes, which cannot implement background gradient and must be used with the second-level mark-fill. The second-level tags (fill filling processing, stroke border processing, extrusion three-dimensional processing, etc.) are often the same as common attributes, it is not specially designed for a certain level-1 mark (oval circle, roundrect circle rectangle, line, background, etc.), but can be applied to multiple level-1 marks, affects the graphic effect of the output or representation of a level-1 mark.
At present, there is no time to talk about the second-level mark. This chapter only requires you to briefly understand the syntax of the second-level mark, learn more about VML's powerful graphic effect processing functions and the rich attributes of level 2 tags! And knowing that the background is used in this way, it completes the gradient effect of the webpage background color. In the above 4 codes, <div style = 'height: 2000 '> </div> is not required, in the example 4, it is used to lengthen the webpage length and better display effect.
The second-level mark stroke border processing and fill filling processing will be described in detail in subsequent chapters. After that, you can apply the level-2 tag to the level-1 tag to achieve various graphic processing effects.

Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763237.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.