Dreamweaver let CSS make Web image translucent

Ok, let's start now, if you have to open Dreamweaver 4, here is the setup step: No use of this tool? Just 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.