Web page special effects let CSS make the page picture translucent

css| Special Effects | transparency | Web pages |

Have you ever used CSS? Of course, I mean you like to do the Web page, used? Well, did you use its special effects? then please follow me. Let me first introduce the CSS,CSS is not part of the HTML, it belongs to the auxiliary language of HTML, in the absence of CSS, the Web page is static, but since the CSS, the history of the Web page will be rewritten, CSS to add a lot of the Web page you can not imagine the dynamic effect, which is one of the points, Because there are many special effects in CSS, for example, we are talking about using CSS to make the picture transparent.

Perhaps you will ask, GIF picture is not transparent? Then why bother, hey, GIF can be transparent, but can translucent it? That's obviously not going to work, but CSS is OK. If you want to learn, come with me.

If it is completely transparent, then it is not meaningful, it is important that it can make the picture translucent, hey, don't you understand? Since it is translucent, the people who have studied Photoshop should know that the translucent, can be half covered by the display of the elements below the picture! We can use this to do a lot of good. For example, smoke-like effects, of course, if you are willing to use your head, more exciting effects may be able to do it. Today we will only discuss how to set up and use this special effect in Dreamweaver 4.

Ok, let's start right now, if you have to open Dreamweaver 4, here's the setup step: You didn't use this tool? Go to www.xsheji.com download one.

1: In the Dreamweaver 4 midpoint windowàcss styles (or press the keyboard shift+f11), pull up the CSS styles window.

2: In the CSS Styles window, click the plus sign in the lower-right corner to pop up the new style window. Setup as shown:

3: Click OK, pop up a large window style definition for. Clarity, we follow the following figure.

Maybe you've noticed Alpha (opacity=, finishopacity=, style=, startx=, starty=, finishx=, finishy=?) This piece of code, there are many question marks, which requires us to use parameters to replace it, do not see the code is afraid, nothing but a few meaning, understand after not so much. To get good results, the arguments used in place of the question mark can not be sloppy, look at the meaning of each parameter before we go on.

(1): "Opacity" represents the level of transparency, the range is 0---100, in fact, the meaning of the percentage, if you want to become fully transparent, then use 0 instead of Opacity after the question mark.

(2): "Finishopacity" is used to specify the end of the transparency, the scope of the same as opacity (finishopacity optional parameters, do not want to remove it.

(3): "Style" is the specified transparent area of the shape characteristics, 0 for the unified shape, 1 for linear, 2 for radial, 3 for the rectangle. For example, we can generally write style=1.

(4) "StartX" and "Starty" is to represent the beginning of the gradient effect of the x and Y coordinates, (coordinates should know what it is) generally we set to Startx=0, Starty=0 (this is the transparent effect of the image from the top left corner of the picture.) )

(5) "Finishx" and "finishy" of course, this is the end of the gradient to represent the horizontal ordinate, here is the key, fill in what value that depends on your picture of the high and wide, assuming that our picture height and width are 100, 200 pixels, then can be written as finishx= Finishy=100. (If you only want half the area is transparent, then you can set it to finishx=100, finishy=50)

To give you the following complete code for your reference: (The following number I am assuming that the picture height and width are 100, 200 pixels respectively)

Alpha (opacity=25, finishopacity=50, style=1, startx=0, Starty=1, finishx=200, finishy=100)

4:ok, what you should do is replace the pesky question mark with the value you want, set the parameters, and click OK. The steps to set up this is done, but it does not mean we finished, we have to give this effect to the picture. The steps to use are described below.

1: In Dreamweaver 4 insert a graph, assuming a height of 100, width of 200 units is pixel (in order to see the effect, we can set the background of the page to red and other bright colors.

2: Pull up the CSS Styles window again (see Set Step 1)

3: In the CSS Styles window, there should be a clarity, as indicated in the figure:

　　
Figure 3

4: In Dreamweaver 4 Select the diagram you inserted.

5: Click on the point above figure 3 with the mouse.

6: You are done, you can press the keyboard F12 to preview (note that this special effects in the editing state is not visible, be sure to preview to see.)

How, the picture is not changed translucent? This tutorial only plays a role in the process, after all, we have to master the method can be extrapolate.