Opacity / Transparency property in CSS
The opacity attribute determines the opacity and transparency of an element.
Transparency of images
The opacity attribute can get values from 0.0 to 1.0 , the smaller the value, the more transparency.
Note : Internet Explorer 8 and earlier versions use filter: alpha (opacity = x). x can be from 0 to 100. The lower the value, the more transparent the element is.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */
}
Transparency of images
The smaller the opacity attribute value, the more transparency.
Image with 80% opacity transparent:
Transparent effect when dragging
The opacity attribute is often used with : hover to change the transparency of the image when hovering over.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
}
For example:
Transparency of images
The opacity attribute is often used with: hover to change transparency
of the image when hovering over.
In the above example, the first CSS fragment is similar to the code in example 1 and adds the effect when the user moves the mouse over one of the images, the image becomes clear. Also, you can leave the original image with the clear opacity of 1.0 by default, after hovering over, the image will fade as follows:
Transparency of images
The opacity attribute is often used with: hover to change transparency
of the image when hovering over.
Transparent Box
When using the opacity attribute to add opacity to an element's background, all child elements will inherit that opacity. This makes the text inside the element with high opacity difficult to read:
div {
opacity: 0.3;
filter: alpha(opacity=30); /* sử dụng cho IE8 trở về trước */
}
Transparent Box uses RGBA
If you don't want to apply opacity to child elements like in the example above, you can use RGBA color values. For example, just set the opacity for the background color, not set for text:
div {
background: rgba(128, 0, 128, 0.3) /* Nền màu tím với 30% opacity */
}
You should read it
- How to enable or disable transparency effects in Windows 10
- How to create semi-transparent images in GIMP
- Invite to download transparent wallpaper app for Android screen, extremely unique Transparent Screen Pro is free
- Top 5 downloadable websites for PNG images, transparent background images
- How to turn all windows on Windows 10 transparent
- How to transparent Taskbar in Windows 10
- This little trick can make your Widget invisible on iOS 14
- How to create transparent background mode on Windows 10
May be interested
- How to Change Transparency in PowerPointthis wikihow teaches you how to make a picture fully or partially transparent in a presentation slide in microsoft powerpoint, using windows or mac. on windows, you can fill a shape with a picture and adjust its transparency. on mac, you...
- iOS 14.5 for iPhone: A focus on privacyios 14.5 brought app tracking transparency (att), a new function that helps users choose not to track unwanted ads.
- Tips to customize the transparency of the Start Menu in Windows 10windows 10 will definitely run better than windows 8, however, you may still want to change the look of the desktop as you like. simple! you can quickly customize and even change the transparency of the start menu bar in win 10. read on to learn how to do it!
- How to adjust Liquid Glass transparency on iOS 26many people do not like the transparent, light-reflecting design of liquid glass on ios 26, so they can adjust the transparency of liquid glass on ios 26 according to the instructions below.
- How to remove the Read only property in Word, Excelsometimes you get an excel or word copy from someone else, you need to edit it but you are told that you only have read only permission and that you have the right to read it without any modification or implementation. change it. the following software tips will show you how to remove the read only property on work, excel.
- display in CSSthe display property is the most important css property to control the layout for a website.
- Facebook and Snapchat are still silently tracking iPhone users even when App Tracking Transparency is turned onit is difficult to say that snapchat and facebook violate apple's privacy policy. a clever form of 'circumvention'!
- Why do hackers hate Sony?sony suddenly was attacked by hackers. the cause is most likely due to the firm's strong intellectual property protection measures.
- 8 smart anti-theft ways that you can homemade at homedo you know where the most hidden hideaway in the house challenges every thief? let us refer to 8 ways to prevent theft smart that you can homemade at home!
- Get familiar with Corel Draw - Lesson 2: Rulers, nets and linesthe ruler consists of vertical and horizontal ruler. the vertical ruler shows the cursor position corresponding to the x axis on the property bar, the horizontal ruler shows the cursor corresponding to the y axis on the property bar.