CSS realizes the two-color gradient of the background of the table

Home

Web Front-end

CSS Tutorial

CSS realizes the two-color gradient of the background of the table_CSS/HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:12 PM

The principle is to use an Alpha filter to add a transparent gradient to each table, controlled by the background color of the table, and a single td controls another color gradient
Alpha filter
Syntax: {FILTER: ALPHA(opacity=opacity, finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY= 0, FinishX=0, FinishY=100);

The 'Alpha' attribute blends a target element with the background. Designers can specify numerical values to control the degree of blending. This "blending with the background" is colloquially known as the transparency of an element. By specifying coordinates, you can specify the transparency of points, lines, and surfaces. The meanings of their parameters are as follows:
"opacity' represents the level of transparency. The default range is from 0 to 100, and they are actually in the form of percentages. In other words, 0 represents completely transparent and 100 represents completely opaque." finishopacity' is an optional parameter. If you want to set the transparency effect of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100. The "style' parameter specifies the shape characteristics of the transparent area. 0 represents a uniform shape, 1 represents a line, 2 represents a radial shape, and 3 represents a rectangle. "STARTX" and "STARTY" represent the starting X and Y coordinates of the gradient transparency effect." FINISHX " and "FINISHY" represent the X and Y coordinates of the end of the gradient transparency effect.

[Ctrl+A to select all Note: If you need to introduce external Js, you need to refresh it to execute ]

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand