Dreamweaver skills: Hazy is beautiful

In the image processing of a webpage, translucent is a commonly used image effect. It can display the elements in the image half-screen. With this, we can make many effects, such as smoke effects. Today we will discuss how to set and use this effect in Dreamweaver 4.

Procedure:
1. Click "window"> "CSS Styles" (or press "shift + F11" on the keyboard) in Dreamweaver 4 to bring 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. In the figure, "Name" is the Name of the created Class, and the format of the Class Name is ". XXXXX "(there must be a dot before);" Type "has three options on the right, from top to bottom: create a Class, redefine tags (web page elements) select a pseudo-class. There are two options on the right side of "Define": the above refers to creating an external CSS file (after this is selected, the CSS you created is not embedded into your webpage, instead, it becomes a separate CSS file for webpage calls. this is the case for large websites); "this Document only" refers to setting up CSS directly on the current page.
3. Click "OK" to bring up a large window of Style definition for. clarity. Let's set it. Except for * Filter, do not worry about other options. Select Alpha from the drop-down menu on the right of * Filter. Maybe you have noticed the code in figure 2, "Alpha (Opacity = ?, FinishOpacity = ?, Style = ?, StartX = ?, StartY = ?, FinishX = ?, FinishY = ?)" There are many question marks. We need to replace them with parameters:
(1) "Opacity" represents the level of transparency. It ranges from 0 ~ 100 means percentage. If you want to change to fully transparent, use 0 to replace the question mark after Opacity;
(2) "FinishOpacity" is used to specify the transparency at the end. The range is the same as that of Opacity (FinishOpacity is an optional parameter. You can remove it if you do not want it .);
(3) "Style" is the shape feature of the specified transparent area. 0 represents a unified shape, 1 represents a linear shape, 2 represents a radiation shape, and 3 represents a rectangle;
(4) "StartX" and "StartY" represent the X and Y coordinates starting from the gradient effect. Generally, we set it to StartX = 0 and StartY = 0 (this indicates that the transparency effect starts from the upper left corner of the image );
(5) "FinishX" and "FinishY" represent the horizontal and vertical coordinates at the end of the gradient effect. It is very important to fill in the value. It depends on the height and width of your image. Suppose our image height and width are 100 and 200 pixels, respectively, then we can write FinishX = 200, FinishY = 100. (If you only want half of the area to be transparent, you can set it to FinishX = 100, FinishY = 50 ).
After setting these parameters, click "OK ". The setup step is complete.

Procedure:
1. Insert a picture in Dreamweaver 4. Assume that the pixel height is 100 and the width is 200. (in order to see the effect, set the webpage background to bright red.
2. Call out the CSS Styles window again (see the setting procedure). In the CSS Styles window, there should be a Clarity.
3. Select the inserted graph and click "Clarity ".
4. This is all done. You can press F12 on the keyboard to preview it. (Note: This special effect is invisible in the editing status and must be visible in the preview status.