首页 > 其他分享 >css34 CSS Opacity / Transparency

css34 CSS Opacity / Transparency

时间:2024-06-01 15:43:48浏览次数:32  
标签:Opacity opacity Transparency color transparent background div css34 Example

https://www.w3schools.com/css/css_image_transparency.asp

 

CSS Opacity / Transparency

   

The opacity property specifies the opacity/transparency of an element.


Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

 

Example

img {
  opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

 


Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

 

Example

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

 

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

 

Example

img:hover {
  opacity: 0.5;
}  
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

 

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

 

Example

div {
  opacity: 0.3;
}  
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #04AA6D;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

 


Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:


 

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(4, 170, 109);
  padding: 10px;
}

div.first {
  background: rgba(4, 170, 109, 0.1);
}

div.second {
  background: rgba(4, 170, 109, 0.3);
}

div.third {
  background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

 


Text in Transparent Box


 

Example

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

 


Example explained

First, we create a <div> element (class="background") with a background image, and a border.

Then we create another <div> (class="transbox") inside the first <div>.

The <div class="transbox"> have a background color, and a border - the div is transparent.

Inside the transparent <div>, we add some text inside a <p> element.

 

标签:Opacity,opacity,Transparency,color,transparent,background,div,css34,Example
From: https://www.cnblogs.com/emanlee/p/18226025

相关文章

  • Flutter 中的 Opacity 小部件:全面指南
    Flutter中的Opacity小部件:全面指南在Flutter中,动画和视觉效果是提升用户体验的重要手段。Opacity小部件允许你改变子组件的透明度,从而实现淡入、淡出或其它透明度相关的动画效果。本文将提供Opacity的全面指南,帮助你了解如何使用这个小部件来增强你的Flutter应用的视觉......
  • C# WPF 根据RGB三色得出透明度Opacity
    当我们把ARGB压缩为RGB数据时,会丢失A透明通道那么就有可能会遇到反推A透明通道的问题原理很简单,取RGB三色最大通道除255得到A通道Randomrandom=newRandom();bytered=Convert.ToByte(random.Next(0,0xff));bytegreen=Conver......
  • display none 和 opacity 0 二者的区别辨析
    HTML属性display:none和opacity:0在Accessibility(无障碍性)处理上有明显的区别,它们分别用于不同的场景,并对网页元素的可见性和交互性产生不同的影响。在本文中,我将详细解释这两个属性的作用、区别以及何时使用它们,并提供示例来说明它们的效果。display:none和opacity:0......
  • 比较 opacity: 0、visibility: hidden、display: none
    结构display:none:会让元素完全从渲染树中消失,渲染的时候不占据任何空间,不能点击,visibility:hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击opacity:0:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击继承display:none和op......
  • AllowsTransparency属性详解
    AllowsTransparency属性是一个布尔值属性,用于指示窗口是否允许透明度。需要注意的是,当AllowsTransparency属性为True时,窗口的Style属性应设置为None,以便正确地呈现窗口的透明度。如果设置为True,则窗口可以是半透明的,即可以设置窗口的不透明度。当AllowsTransparency属性......
  • WPF 使用Background="Transparent"+AllowsTransparency="True"实现穿透效果,窗体多次渲
    如果在WPF中的窗体使用AllowsTransparency="True"实现穿透效果,那么该窗体如果移动、快速渲染、控件比较多的情况,会出现卡顿,CPU暴涨的问题。基于以上情况,可以使用另一种方式实现,由@wuty@terryK指导:usingSystem.Windows;usingAnnotation.Business;namespaceDemo{//......
  • 定位、opacity透明度属性、visibility和display隐藏元素
    定位、opacity透明度属性、visibility和display隐藏元素1.定位position(确定的是移动的基准)static,默认值。静态的。(不让动)relative,相对。相对于自身的位置来移动......
  • Transparency Rendering 半透明物体Blending
    顺序有关Blending现存的应用较为广泛的半透明绘制方法是这样的:首先将所有的不透明物体(Opaqueobjects)绘制到屏幕上(或者延迟渲染体系中绘制到GBuffer里),然后将剩余的......
  • TouchableOpacity无效
    错误代码如下:<TouchableOpacityonPress={this.handleConfirmPress}activeOpacity={0.6}><Textstyle={styles.buttonText}>确定</Text></TouchableOpacity>没问......
  • WPF 制作高性能的透明背景异形窗口(使用 WindowChrome 而不要使用 AllowsTransparency=
    在WPF中,如果想做一个背景透明的异形窗口,基本上都要设置 WindowStyle="None"、AllowsTransparency="True" 这两个属性。如果不想自定义窗口样式,还需要设置 Background=......