Chat with CSS alpha filters

xiaoxiao2021-03-06  89

Author: Fengyong Yao

"Alpha" filter, hear this name, you may think of flash in Flash, Photoshop seems to have seen. One thing, their role is basically similar, that is, mixing a target element with the background. You can specify a value to control the extent of the mix. This "mixed with the background" is a transparency of an element. By specifying the coordinates, the transparency of the point, line, and face can be specified. Since the parameters of the "alpha" filter are more, let's explain the parameters first, each parameter meanings are as follows:

"Opacity": represents the transparency level. The range is from 0 to 100, and they are actually a percentage form. That is, 0 represents completely transparent, and 100 represents completely opaque.

"Finishopacity": is an optional parameter. If you want to set a transparent effect of gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.

"Style": Specifies the shape characteristics of the transparent area. One represents a unified shape, 1 represents the line shape, 2 represents the radiation, and 3 represents the rectangular.

"StartX" and "Starty": the start X and Y coordinates representing the gradient transparent effect.

"Finishx" and "Finishy": represent the coordinates of X and Y represent the gradient transparent effect.

Ok, let's talk about a bunch of parameters, let's try to do a few instances:

First, special text effect

Load the "alpha" filter to the where the text is located, you can generate some wonderful effects, please see the figure below:

figure 1

figure 2

image 3

The above three effects except that the "style" parameters are different, and other parameters are the same. The code of Figure 1 is: alpha (Opacity = 10, finishopacity = 90, style = 1, startx = 0, starty = 0, finishx = 100, finishy = 100);

The filter code of Figure 2 is: alpha (Opacity = 10, finishopacity = 90, style = 2, startx = 0, starty = 0, finishx = 100, finishy = 100);

The filter code of Figure 3 is: alpha (Opacity = 10, finishopacity = 90, style = 3, startx = 0, starty = 0, finishx = 100, finishy = 100);

Pay attention to: Alpha filter

1. Since the "alpha" filter makes the current element partially transparent, the color of the content of the element plays an important role in the entire effect, so the reasonable matching of the color is quite important;

2, the size of the transparency should be carefully adjusted according to the specific situation, take an optimum value.

Second, the new 别 的 马 马

Running the horse lamp special effects in the current website, but I don't like the fade of the running horse below, please see the picture below:

Figure 4 chic hunting

You can also easily make a run horse lamp with the "alpha" filter. The specific method is as follows:

1. Insert a list of a row, set the background of the table to "# 000000";

2, set the alpha filter in DW3, the specific filter code is: .alpha1 {filter: alpha (opacity = 100, finishopacity = 20, style = 2, startx = 0, starty = 0, finishx = 100, finishy = 100)};

3, insert a horse running light in the table and add the alpha filter in the race light, end! What should I notice here is not to load the "alpha" filter to , but to load into the running horse, otherwise the effect will be in court. Press F12 to see it. If you have no running on the horse, I will give one here, save you everywhere, annoying!

Motion Lanzi

Third, imitation TV effect

Please follow the following effects:

Figure 5, 6 imitation TV effect

Since this effect is dynamic, the above is two process pictures I arrested. The production method is as follows:

1. Insert a 1 * 1 form and use a picture as a table background.

2, we set the background of the cell to white, and load an alpha filter on the cell in the form, the filter code is: .alpha1 {filter: alpha (Opacity = 50)}, other parameters of the filter Defaults.

3. Point with the mouse in the cell cell, then click "INSERT" of the main menu, and select the "Layer" submenu in the menu to pull out, insert a layer (we call: layer1). We click "INSERT" again, and select the "Layer" submenu in the menu to pull out, and then insert a layer (we call: layer2).

4, we call Layer1 for the father of Layer2, then Layer2 is the sub-layer of Layer1. Note: Do not drag Layer1 with mouse. All Width and Height of Layer1 are set to "1". Drag the Layer2 to the table and adjust its size to completely coincide with the form.

5. Insert a "marquee" on the Layer2, press F12 to see the effect like the above picture.

This alpha filter makes the background picture look like a layer of tulle, so that the text above can highlight it, which is often seen in the TV. Also, please pay attention to 3, 4 steps to insert the layer skills, which inserted the layer, no matter how much content you have before and after it, it is constant with the relative position of the background picture, it overcomes the layer in DW3 Use the absolute coordinates to the problem that is not allowed.

转载请注明原文地址:https://www.9cbs.com/read-96588.html

New Post(0)
CopyRight © 2020 All Rights Reserved
Processed: 0.041, SQL: 9