CSS中的透明度、CSS中的鼠标指针的样式

最新推荐文章于 2024-11-21 12:04:47 发布

仙鹤__

最新推荐文章于 2024-11-21 12:04:47 发布

阅读量392

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129955630

版权

文章介绍了CSS中如何使用opacity属性来设置元素的透明度，包括不同透明度值的效果，并展示了当为父元素设置背景透明度时，子元素会继承该透明度的特性。此外，还讲解了cursor属性用于改变鼠标指针样式的各种可能性，包括预定义的样式和自定义图片作为鼠标指针。

摘要由CSDN通过智能技术生成

1.1 css中的透明度

opacity 属性指定元素的不透明度/透明度。

opacity 属性的取值范围为 0.0-1.0。值越低，越透明，值越大，越清晰。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 790px;;
margin:20px auto 0;
outline:1px dashed;
}
.box img{
width: 260px;

}
</style>
</head>
<body>
<div class="box">
<!-- 值越低，越透明 -->
<img src="./img/1.jpeg" alt="" style="opacity:0.2;">
<img src="./img/1.jpeg" alt="" style="opacity:0.5;">
<img src="./img/1.jpeg" alt="" style="opacity:0.8;">
</div>
</body>
</html>

透明悬停效果

透明盒

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

 <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: #4CAF50;
            float: left;
            margin-right: 10px;
        }
        .box1{opacity: 1;}
        .box2{opacity: 0.6;}
        .box3{opacity: 0.3;}
        .box4{opacity: 0.1;}

    </style>
</head>
<body>
    <div class="box box1">opacity 1</div>
    <div class="box box2">opacity 0.6</div>
    <div class="box box3">opacity 0.3</div>
    <div class="box box4">opacity 0.1</div>
</body>

10.2 css中鼠标指针的样式

置鼠标指针放在一个元素边界范围内时所用的光标形状，需要对元素的css属性cursor进行设置。cursor属性可能的值：

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的（user agent stylesheet）光标。
crosshair 光标呈现为十字。
pointer 光标呈现为指示链接的指针（一只小手）
move 此光标指示某对象可被移动（带箭头的十字）。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏，或者一个圈在那转）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

自定义鼠标样式： cursor: url('图标地址'), default;

cursor: url(''),pointer;
或者
cursor: url(''),default;

注意：需要在自定义鼠标样式末端，始终定义一种普通光标，以防没有由URL定义的可用光标，多个选项用逗号,隔开。（如上方例子的 default 即为备选光标。

url:需使用的自定义光标的 URL。图片类型需要是.cur或.ani格式的。

图片转icon

首先有一张 .ico 格式的图片, 如果没有，可以去以下几个网站, 将图片转换为.ico 格式：

在线生成透明ICO图标——ICO图标制作（推荐）

在线图片转icon格式 – 图片转换成icon在线工具 – 迅捷PDF转换器在线免费版（迅捷）

PNG转ICO - 在线转换图标文件

body { cursor: url("小图片地址"), default} /* 设置鼠标指针默认为一个小图片 */

<style>
        body{
            /* cursor: pointer; */
            /* cursor: move; */
            /* cursor: help; */
            cursor: url('./img/1.ico'), default;;
        }
    </style>
</head>
<body>
    <p>小汤</p>