Web Front-end
CSS Tutorial
Detailed explanation of ccs transparent attribute and background transparent inheritance method examples
Detailed explanation of ccs transparent attribute and background transparent inheritance method examples
Transparency can often produce good web page visual effects. First, let me introduce the CSS transparency code that is compatible with mainstream browsers:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}The above attributes are:
opacity : 0.5; This is the most important because it is a CSS standard. This property supports Firefox, Safari and Opera.
filter:alpha(opacity=50); This is set for IE6, and the possible value is 0-100 , the other three are 0 to 1.
-moz-opacity:0.5; This is to support some older versions of the Mozilla browser.
-khtml-opacity: 0.5; This is to support some older versions of Safari browser.
CSS Transparency Inheritance Issue
However, the transparent attribute of CSS involves an inheritance issue. When transparency is set for a parent element, the child element will automatically inherit its transparency. Even if you specify a transparency of 1 for the child element, it will be invalid. of.
For the case where the sub-element is text, the solution is generally to leave it alone as long as it can still be seen clearly. Another compromise is to assign a relatively darker color to the text sub-element. In other words, when the child element inherits transparency, the resulting text color is exactly what you want. The premise is that this color has the possibility of deepening, and the color and transparency values need to be calculated in detail.
There is also the statement "cancel transparency inheritance", which is not very accurate. As far as I know personally, there is no way to cancel transparency inheritance. It can only be said that when you want to achieve "multiple elements covering, only make the specified elements transparent", you can use some Hacks.
After searching, I found a good way to achieve this effect - a question about transparent inheritance. Friends who are interested can take a look. The principle is very simple, add an empty element as a transparent layer, and the element that does not want to be transparent but needs to achieve a covering effect is a sibling element. The parent element is positioned using position:relative; the two child elements are positioned using position:absolute to achieve coverage.
html code:
<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 <p class="p2">图片</p> </p>
CSS code
body {
background-image: url(./105247.png);
background-repeat: repeat;
}
.p2{ width:100px; height:100px; background: url(./testbok.png)}
.p3{ width:200px; height:200px; position:relative; margin-top:10px}
.p4{ position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}If the height of your outside container is variable, then just set the height of p3 to a sufficient height.
This The method has a very bad shortcoming: there is an extra blank p
The above is the detailed content of Detailed explanation of ccs transparent attribute and background transparent inheritance method examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of C++ function inheritance: How to use 'base class pointer' and 'derived class pointer' in inheritance?
May 01, 2024 pm 10:27 PM
In function inheritance, use "base class pointer" and "derived class pointer" to understand the inheritance mechanism: when the base class pointer points to the derived class object, upward transformation is performed and only the base class members are accessed. When a derived class pointer points to a base class object, a downward cast is performed (unsafe) and must be used with caution.
How to replace all ppt backgrounds
Mar 25, 2024 pm 04:25 PM
PPT background replacement is an important operation that can quickly unify the visual style of the presentation. You can quickly replace the background of your entire presentation by modifying the slide master or using the Format Background feature. In addition, some PPT versions also provide a batch replacement function, which can easily replace the background of all slides. When replacing the background, you should pay attention to choosing a background that matches the theme of the presentation, and ensure that the background clarity and resolution meet the requirements.
The birth background and original intention of Go language
Apr 04, 2024 am 08:48 AM
The Go language was born at Google to solve the problems of complexity and insufficient concurrency support of C++. Its original intention is to create a simple, easy-to-learn, efficient concurrency, memory-safe, cross-platform language to improve programmer productivity, build reliable and scalable systems, and promote code porting and sharing.
How to change the background color of photos on Meitu Xiuxiu
Apr 08, 2024 pm 03:56 PM
1. Open the Meitu Xiu Xiu software, select [Picture Beautification], and import photos from the album. 2. Click [Cutting] on the bottom toolbar and select the [Background Replacement] function. 3. In the [Background] option, select the desired background color from the solid color box, or upload a custom image. 4. After confirming the selection, click [Save] to complete the background color change.
Detailed explanation of C++ function inheritance: How to debug errors in inheritance?
May 02, 2024 am 09:54 AM
Inheritance error debugging tips: Ensure correct inheritance relationships. Use the debugger to step through the code and examine variable values. Make sure to use the virtual modifier correctly. Examine the inheritance diamond problem caused by hidden inheritance. Check for unimplemented pure virtual functions in abstract classes.
Detailed explanation of C++ function inheritance: How to understand the 'is-a' and 'has-a' relationship in inheritance?
May 02, 2024 am 08:18 AM
Detailed explanation of C++ function inheritance: Master the relationship between "is-a" and "has-a" What is function inheritance? Function inheritance is a technique in C++ that associates methods defined in a derived class with methods defined in a base class. It allows derived classes to access and override methods of the base class, thereby extending the functionality of the base class. "is-a" and "has-a" relationships In function inheritance, the "is-a" relationship means that the derived class is a subtype of the base class, that is, the derived class "inherits" the characteristics and behavior of the base class. The "has-a" relationship means that the derived class contains a reference or pointer to the base class object, that is, the derived class "owns" the base class object. SyntaxThe following is the syntax for how to implement function inheritance: classDerivedClass:pu
How do inheritance and polymorphism affect class coupling in C++?
Jun 05, 2024 pm 02:33 PM
Inheritance and polymorphism affect the coupling of classes: Inheritance increases coupling because the derived class depends on the base class. Polymorphism reduces coupling because objects can respond to messages in a consistent manner through virtual functions and base class pointers. Best practices include using inheritance sparingly, defining public interfaces, avoiding adding data members to base classes, and decoupling classes through dependency injection. A practical example showing how to use polymorphism and dependency injection to reduce coupling in a bank account application.
bottom attribute syntax in CSS
Feb 21, 2024 pm 03:30 PM
Bottom attribute syntax and code examples in CSS In CSS, the bottom attribute is used to specify the distance between an element and the bottom of the container. It controls the position of an element relative to the bottom of its parent element. The syntax of the bottom attribute is as follows: element{bottom:value;} where element represents the element to which the style is to be applied, and value represents the bottom value to be set. value can be a specific length value, such as pixels
