Let CSS make web images translucent
------------ Dreamweaver 4 Application of CSS Special Effects
Author: singer
Have you used CSS? Of course, I refer to if you like to do a web page, used? Very good, have you used its effects? No? Then please come with me.
Let me introduce the CSS, CSS does not belong to HTML, which belongs to HTML auxiliary language. Before there is no CSS, the web page is static, but since there is CSS, the history of web pages will be rewritten, CSS can Join the web page to many of your imagination, this is also one of them, because there are many effects in CSS, such as our use of CSS today to transparent.
Maybe you will ask, is the GIF picture not transparent? That's still so trouble, hey, GIF can be transparent, but can be translucent? That is obvious, but CSS can. I want to learn to come with me.
If it is completely transparent, then its meaning is not big, it is important that it can make the picture translucent, hey, still don't understand? Since it is a semi-transparent, people who have learned Photoshop should know that it is half-transparent, they can display the elements below the picture! We can do a lot of effects like this, such as smoke effect, of course, if you are willing to move your brains, more exciting results can be done. We only discuss how to set up with this effect in Dreamweaver 4.
OK, we start now, the premise is that you have to open Dreamweaver 4, below is the setting step: Haven't used this tool? gosh! Go to www.xsheji.com to download one.
1: Point WindowàcSs Styles in Dreamweaver 4, call up the CSS STYLES window.
2: In the CSS Styles window, click the plus sign in the lower right corner to bring up the New Style window. Set as shown:
3: Point OK, pop up a large window style definition for .clarity, we set it down below.
Maybe you have noticed Alpha (Opacity = ?, finishopacity = ?, style = ?, sttx = ?, sarty =? Instead of it, don't see the code, I am afraid, nothing more than a few means, I don't have a matter after understanding. To get a good effect, then these parameters used to replace the question mark can not be horses and tiger, first look at each parameter Meaning We continue.
(1): "Opacity" represents the transparency level, the range is 0 - 100, in fact, the meaning of the percentage, if you want to become transparent, then use 0 instead of the question mark behind the opacity.
(2): "Finishopacity" is used to specify the transparency at the end, the range is the same as Opacity (Finishopacity is an optional parameter, if you don't want, you will drop it.
(3): "Style" is the shape characteristics of the transparent area, 0 represents a unified shape, 1 represents linear shape, 2 represents the radiographic, 3 represents the rectangle. For example, we can generally write style = 1. (4) "STARTX" and "start" is the X and Y coordinates that represent the gradient effect, (what should be known to what is it?) General We are set to startx = 0, starty = 0 (this is the transparent effect of the representation is from the picture The top left corner begins.)
(5) "Finishx" and "Finishy" Of course, this is the horizontal length coordinate when the gradient effect is ended. It is critical here. If you fill out, you have to look at your picture, how is our picture With the width of 100,200 pixels, it can be written into Finishx = 200, Finishy = 100. (If you only want half of the area is transparent, you can set it into finishx = 100, Finishy = 50)
Give you the following full code for you: (I am a hypothetical picture high and wide, respectively, 100,200 pixels respectively)
Alpha (Opacity = 25, Finishopacity = 50, Style = 1, StartX = 0, Starty = 1, Finishx = 200, Finishy = 100)
4: OK, this time you should do to replace the values you want to replace those nasty question marks, and then click OK after setting these parameters. The steps set to this are completed here, but it is finished whether it is not mean, we will give this effect to the picture. Here is the steps to use.
1: Insert a picture in Dreamweaver 4, assuming high is 100, width 200 unit is pixel (in order to see the effect, we can set the web page to a bright color.
2: Turn up the CSS Styles window again (see Setting Step 1)
3: In the CSS Styles window, there should be a Clarity, as shown in the figure:
image 3
4: Select the picture you insert in Dreamweaver 4.
5: Click the mouse to click on the indication of Figure 3.
6: Datual, you can press the keyboard F12 to preview (note that this effect is invisible in editing state, must preview can be seen.
How, is the picture is translucent? This tutorial only plays the role of throwing bricks, saying that it is still necessary to master the method and can give a non-one.
