Let CSS make the page picture translucent

css| Transparent | Web page have you ever used CSS? Of course, I mean you like to do Web pages, used? Well, have you ever used its special effects? No? Then come with me, then.





let me first popular introduction of CSS,CSS does not belong to 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 Web pages you can not imagine the dynamic effect, This is also one of the things, because there are many special effects in CSS, for example, we are talking about using CSS to make the picture transparent.





Perhaps you would ask, GIF image is not transparent? So 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 things, such as smoke-like effects, of course, if you're using your head, more wonderful effects can be done. Today we will only discuss how to set up and use this special effect in Dreamweaver 4.





Ok, we start now, if you have to open Dreamweaver 4, here is the setup step:





1: In the Dreamweaver 4 midpoint window>>css styles (or by the shift+f11 of the keyboard), bring 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:











Figure 1





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











Figure 2





Maybe you've noticed Alpha (opacity=, finishopacity=, style=, startx=, starty=, finishx=?) 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, then these are used to replace the question mark parameters can not be sloppy, first look at the meaning of each parameter we continue.





(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 the question mark behind Opacity.





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





(3) "Style" is the shape feature that specifies the transparent area, 0 represents the uniform shape, 1 represents the linear, 2 is the radial, and 3 is the rectangle. For example, we can generally write style=1.





(4) "StartX" and "Starty" are the x and Y coordinates that represent the beginning of the gradient effect, (coordinates should know what it is) generally we set to Startx=0, starty=0 (this means that the transparency effect is the beginning of the top left corner of the picture.) ）





(5) "Finishx" and "finishy" of course, this is to represent the end of the gradient effect of the horizontal ordinate, here is the key, fill in what value that depends on your picture of high and wide, assuming that our picture height and width are 100, 200 pixels, Then you can write finishx=200, 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 unwanted 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: Insert a graph in Dreamweaver 4, assuming a height of 100, and a width of 200 pixels (in order to see the effect, we can set the background of the Web page to red and other bright colors.





2: Bring 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.)





, does the picture become translucent? This tutorial only plays a role in the beginning, in the final analysis, we have to master the method can be extrapolate.