<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
不透明度
rgba(0,0,0,0):给父元素设置rgba,子元素不会使用该属性
0,0,0 分别代表红绿蓝(255)
0 不透明度
opacity:给父元素设置opacity,子元素也会默认使用该属性
0 完全透明(占控件)
0.5 半透明
手势
opcity 鼠标的状态
最大高度/宽度 最小高度/宽度,
应用于:>=,<=
max-height min-height
max-width min-width
值要是设置%,则会根据以父元素的宽度/高度为准
屏幕适应屏幕高度/宽度,父元素 body{100%} ,子元素 height{100&}
-->
<style>
#div1{
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);
}
#div2{
width: 100px;
height: 100px;
background-color: #0000FF;
opacity: 0.5;
cursor: help;
cursor: url(file:///D:/Hbuilder/基础练习-html/1.jfif),auto; //鼠标划入,显示自定义图片
}
body{
height: 100%;
}
#div3{
width: 100px;
max-height: 100%;
background-color: #00FFFF;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="div1">
<p>rgba</p>
</div>
<div id="div2">
<p>opacity</p>
</div>
<div id="div3">
最小高度/宽度,最大高度/宽度
最小高度/宽度,最大高度/宽度
最小高度/宽度,最大高度/宽度
最小高度/宽度,最大高度/宽度
</div>
</body>
</html>