【css伪类选择器及透明度——附项目图片及代码】_css 伪类透明图层(1)

最新推荐文章于 2024-05-08 21:22:14 发布

2301_78399616

最新推荐文章于 2024-05-08 21:22:14 发布

阅读量861

点赞数 11

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/2301_78399616/article/details/138237420

版权

2.9、放置图片的容器box
3.0源代码分享

一、伪类选择器

1.1、ul中所有的li变成红色

        /\* 找到一组元素中的第一个li \*/
        ul {
            color:red;
        }

在这里插入图片描述

1.2、找到一组元素中的第一个li

   ul li:first-child{
        color:red;
    }

在这里插入图片描述

1.3、找到一组元素中的最后一个li

  ul li:last-child{
        color:blue;
    }

在这里插入图片描述

1.3、找到某一个元素中的某一个

  ul li:nth-child(3){
        color:skyblue;
    }

在这里插入图片描述

1.4、页面显示hello world

</head>
<body>
    <ul>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
    </ul>
</body>
</html>

1.5、源代码分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /\* 找到一组元素中的第一个li \*/
        ul li:first-child{
            color:red;
        }
        /\* 找到一组元素中的最后一个li \*/
        ul li:last-child{
            color:blue;
        }
        /\* 找到某一个元素中的某一个 \*/
        ul li:nth-child(3){
            color:skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
        <li>
            hello world
        </li>
    </ul>
</body>
</html>

二、透明度

     .box{
            width:300px;
            height:300px;
            background-color:red;
        }
</head>

在这里插入图片描述

2.1、设置背景色大小与图片高宽度相等

在这里插入图片描述

2.2、清除网页的默认边距

   \*{
      /\* 清除网页的默认边距
 margin:0px;
 padding:0px;
 }
 .box{
 width:300px;
 height:300px;
 background-color:black;
 /\*原本放置代码位置\*/
    }
</style>

! ! ! 为了表述清楚，我就把代码依次从样式里面拿出来了

2.3、使用绝对定位标签把图片放置到背景图层上面

/\* 绝对定位 \*/
   position:absolute;
        top:0;
        left:0;

看着背景色上没东西，其实图片已经被背景色盖住了🙂

在这里插入图片描述

2.4、透明度:0-1

   /\* 0属于完全透明 \*/
   /\* 1属于完全不透明 \*/
    /\* opacity 元素透明 不仅仅是背景 内容也会透明 \*/
   opacity:0.5;

在这里插入图片描述

2.5、在图层上面显示一行hello world 及黑色背景下不显示文字问题

在此之前，先看一张图片，你就发现，自己是不是眼瞎了？（狗头保命）
实际上，图片左上角上面有一行hello world,什么？我不信，除非让我康康（狗头）
在这里插入图片描述

垂死病中惊坐起，小丑竟是我自己😂
电子竞技不需要视力（这下心里是不是好受多了狗头）

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

链图片转存中…(img-X8U0CmMK-1714167031060)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2301_78399616

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【css伪类选择器及透明度——附项目图片及代码】_css 伪类透明图层(1)

color:blue;
复制链接

扫一扫

【css伪类选择器及透明度——附项目图片及代码】_css 伪类透明图层(1)

一、伪类选择器

1.1、ul中所有的li变成红色

1.2、找到一组元素中的第一个li

1.3、找到一组元素中的最后一个li

1.3、找到某一个元素中的某一个

1.4、页面显示hello world

二、 透明度

2.1、设置背景色大小与图片高宽度相等

2.2、 清除网页的默认边距

2.3、使用绝对定位标签把图片放置到背景图层上面

2.4、透明度:0-1

2.5、在图层上面显示一行hello world 及黑色背景下不显示文字问题

二、透明度

2.2、清除网页的默认边距