How to set opacity in html
Setting method: 1. Use the RGBA() function, the syntax "Attribute: RGBA (red value, green value, blue value, transparency value);"; 2. Use the opacity attribute, the syntax "opacity: transparency value;". The transparency value can be set from 0.0 (fully transparent) to 1.0 (fully opaque).
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
#How to set opacity in html?
Method 1
rgba() sets color transparency
Syntax:
rgba（R,G,B,A）;
RGBA is the abbreviation for the three words Red (red) Green (green) Blue (blue) and Alpha (opacity). RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
Introduction to the values in rgba():
R: red value. Positive integer (0~255)
G: green value. Positive integer (0~255)
B: Blue value. Positive integer (0~255)
A: Transparency. The value is between 0 and 1.
rgba() can simply set the color transparency, which has many applications in page layout. For example: make the background transparent, but the text above is opaque.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgba()</title>
<style>
.demo{
width: 350px;
height: 300px;
margin: 50px auto;
}
.demo *{
width: 120px;
height: 120px;
margin: 10px;
float: left;
}
.demo1{
background:rgba(255,0,0,1);
}
.demo2{
background:rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">背景色不透明，文字不透明！</div>
<div class="demo2">背景色半透明，文字不透明！</div>
</div>
</body>
</html>Rendering:
,
Method 2
opacity attribute setting background Transparency
Syntax:
opacity: value ;
value: Specify opacity, from 0.0 (fully transparent) to 1.0 (fully opaque).
opacityThe property is inherited and will make all elements in the container transparent;
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opacity属性</title>
<style>
.demo{
width: 280px;
height: 140px;
margin: 50px auto;
}
.demo1,.demo2{
width: 120px;
height: 120px;
margin: 10px;
float: left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.demo2{
opacity:0.5;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">
<p>背景色不透明，文字不透明！</p>
</div>
<div class="demo2">
<p>背景色透明，文字也透明！</p>
</div>
</div>
</body>
</html>Rendering:
opacity:0.5; Makes all elements of the demo2 container appear translucent.
Summary: Although both the rgba() method and the opacity method can achieve transparency effects, rgba() only acts on the color of the element or its background color (the child element of the element with rgb() transparency set will not inherit its transparency effect); and opacity is inheritance, which not only affects the element itself, but also makes all sub-elements within the element transparent.
Recommended learning: HTML video tutorial
The above is the detailed content of How to set opacity in html. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
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)
How to install consult under Windows
Sep 29, 2025 am 10:27 AM
1. Go to the official website to download: https://www.consul.io/downloads.html2. Decompression: 3. Set environment variables: path to add E:\programfiles\consul; 4.cmd start: consulagent-dev5. Open the URL: http://localhost:8500, you can see the interface and the interface discovered by related services.
How to align items to the bottom of a flex container with css
Oct 04, 2025 am 03:45 AM
Using CSS to align elements to the bottom of the flex container requires selection method according to the layout direction: if flex-direction is column, set justify-content:flex-end to align all children to the bottom; if it is a row layout, align-self:flex-end to align individual children at the bottom of the cross axis; or use margin-top:auto for specific children in column layout to make them at the bottom of the container and other items remain at the top. Either way, the container must have a clear height to ensure the alignment takes effect.
how to autoplay a video muted in html
Oct 04, 2025 am 12:55 AM
Use the autoplay, muted and playsinline properties to achieve silent automatic playback of HTML videos. Most modern browsers require the video to be muted to play automatically, muted meets this condition, playsinline ensures iOSSafari inline playback instead of full screen, controls are optionally used to display the control bar. If you need to unmute, you can set video.muted=false after user interaction through JavaScript. When triggering programmatically, it must also be set to mute first and catch possible errors. Correctly add these properties and confirm the file path to achieve cross-device compatible silent automatic playback.
how to create a telephone input in html
Oct 04, 2025 am 04:23 AM
Usetype="tel"inHTMLinputtocreateatelephonefield,whichoptimizesmobilekeyboardsandimprovesuserexperience;enhanceitwithattributeslikepattern,required,maxlength,andautocompleteforvalidationandusability.
How to create an image overlay effect on hover with CSS
Sep 29, 2025 am 04:09 AM
First, create an HTML structure and set up a relative positioning container, then hide the overlay through CSS, and finally use the :hover to trigger the opacity transition effect to display the translucent overlay and optional text content.
How to use the position property in CSS?
Oct 01, 2025 am 03:47 AM
ThefiveCSSpositionvaluesarestatic,relative,absolute,fixed,andsticky.Staticisthedefault,followingnormaldocumentflowwithoutoffsetcapabilities.Relativeallowsoffsetfromtheelement'soriginalpositionwhilepreservingspaceandenablinglayeringcontext.Absoluterem
How to create a simple css loading spinner
Oct 04, 2025 am 03:47 AM
Create a div with class="loader" as the loader. 2. Use CSS to set the width, height, border and rounded corner to form a circle, and realize visual rotation through border-top color differences. 3. Add the spin animation defined by @keyframes to make it rotate continuously. 4. Optionally use flexbox to center the loader to display.
html how to make elements side by side
Oct 04, 2025 am 12:39 AM
Use Flexbox, inline-block or Grid to display HTML elements side by side: 1. Flexbox is the most recommended, implemented through display:flex; 2. Inline-block should pay attention to the blank spacing; 3. Grid is suitable for complex layouts, and use grid-template-columns to define columns.
