2020-11-01 学习总结:CSS3 opacity 属性 设置元素的不透明度

CSS3 opacity 属性

定义和用法
opacity 属性设置元素的不透明级别。默认值是1。
2020-11-01 学习总结:CSS3 opacity 属性 设置元素的不透明度_第1张图片

div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}

效果如下:不透明度为0.5
在这里插入图片描述
所有浏览器都支持 opacity 属性。

注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity
属性能够设置的值从 0.0 到 1.0。值越小,越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。

W3C实例 CSS 图像透明度

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

效果如下:原图
2020-11-01 学习总结:CSS3 opacity 属性 设置元素的不透明度_第2张图片
透明度0.4(大小没有变化,图片没截好)
2020-11-01 学习总结:CSS3 opacity 属性 设置元素的不透明度_第3张图片
图像透明度 - Hover 效果
把鼠标指针移动到图像上改变透明度:

img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

当鼠标指针移出图像后,图像会再次透明。
透明框中的文本


<html>
<head>
<style>
div.background /*设置最外面的图像为背景图片*/
{
      
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}

div.transbox /*设置中间文本区域*/
{
      
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

div.transbox p
{
      
  margin: 30px 40px;
}
style>
head>

<body>

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

body>
html>

2020-11-01 学习总结:CSS3 opacity 属性 设置元素的不透明度_第4张图片

你可能感兴趣的:(css学习总结,css,css3)