位置: IT常识 - 正文

【css伪类选择器及透明度——附项目图片及代码】(css伪类选择器怎么用)

编辑:rootadmin
【css伪类选择器及透明度——附项目图片及代码】

推荐整理分享【css伪类选择器及透明度——附项目图片及代码】(css伪类选择器怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css伪类选择器hover,伪类选择器用法,css伪类选择符,css伪类选择符,css伪类选择器有哪些,css伪类选择器有哪些,css伪类选择器怎么用,css 伪类选择器,内容如对您有帮助,希望把文章链接给更多的朋友!

不知不觉,又鸽了好长时间了,非常抱歉,没办法,毕竟开学了,今天课少,抽出了两个小时写了一篇css的,每天不是被催更,就是在催更的路上。放心,小陈陈有时间一定会给大家分享好玩的作品。

让大家欢声笑语中学到新知识,文章大概写了3个半小时,到目前为止已完结,天已经黑了,敲代码手都开始哆嗦了,文章详细易懂,零基础小白也可以直接秒杀系列,代码架构知识梳理,附项目图片及全部源代码,看在小陈陈这么辛苦的份上,希望大家可以给个三连支持一下,谢谢!有条件的大佬们,可以打赏一下,沉浸式写完这篇,写的太入迷了,错过饭点了,估计又要饿肚子了😭

接下来,我们就一起沉浸在知识的海洋里吧!

css伪类选择器及透明度一、伪类选择器1.1、ul中所有的li变成红色1.2、找到一组元素中的第一个li1.3、找到一组元素中的最后一个li1.3、找到某一个元素中的某一个1.4、页面显示hello world二、 透明度2.1、设置背景色大小与图片高宽度相等2.2、 清除网页的默认边距2.3、使用绝对定位标签把图片放置到背景图层上面2.4、透明度:0-12.5、在图层上面显示一行hello world 及黑色背景下不显示文字问题2.6、黑色背景下显示文字解决方法2.7、rgba 只透明背景2.8、rgba和opacity的区别2.9、放置图片的容器box3.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、设置背景色大小与图片高宽度相等【css伪类选择器及透明度——附项目图片及代码】(css伪类选择器怎么用)

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,什么?我不信,除非让我康康(狗头)

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

2.6、黑色背景下显示文字解决方法

其实很简单在样式里面添加一行color: white,为了验证此方法的可用性,我们先注释透明度opacity:0.5;标签

color:white;

然后把注释的透明度取消掉你就会惊奇的发现,我看见了!

2.7、rgba 只透明背景

/* rgba 只透明背景 */ background-color:rgba(0,0,0,0.5);2.8、rgba和opacity的区别

/* rgba 只透明背景 / / opacity 元素透明 不仅仅是背景 内容也会透明 */ 至于为什么,上面已经写的很清楚了。

2.9、放置图片的容器box<body> <img width="300" height="300" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682723515-9298988daf823eb.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg" alt=""> <div class="box"> hello world </div></body></html>3.0源代码分享<!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> *{ /* 清除网页的默认边距 */ margin:0px; padding:0px; } .box{ width:300px; height:300px; background-color:black; /* 绝对定位 */ position:absolute; top:0; left:0; /* 透明度:0-1 */ /* 0属于完全透明 */ /* 1属于完全不透明 */ /* opacity 元素透明 不仅仅是背景 内容也会透明 */ /* opacity:0.6; */ color:white; /* rgba 只透明背景 */ background-color:rgba(0,0,0,0.5); } </style></head><body> <img width="300" height="300" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682723522-9298988daf823eb.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg" alt=""> <div class="box"> hello world </div></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/298989.html 转载请保留说明!

上一篇:3-2. SpringBoot项目集成【用户身份认证】实战 【实战核心篇】基于JWT生成和校验Token(springboot项目结构讲解)

下一篇:世界上最完美的两个软件,太厉害了!(世界上最完美的犯罪)

  • vivox70pro+充电多少瓦(vivox70pro充电多久)

    vivox70pro+充电多少瓦(vivox70pro充电多久)

  • 苹果11和苹果xr有什么区别(苹果11和苹果xr钢化膜一样吗)

    苹果11和苹果xr有什么区别(苹果11和苹果xr钢化膜一样吗)

  • 软件问题导致autucad意外关闭(软件问题导致autocad意外关闭怎么解决)

    软件问题导致autucad意外关闭(软件问题导致autocad意外关闭怎么解决)

  • qq加好友问题怎么设置题(qq加好友问题怎么取消)

    qq加好友问题怎么设置题(qq加好友问题怎么取消)

  • 淘宝系统繁忙购买失败什么意思(淘宝系统繁忙无法购买)

    淘宝系统繁忙购买失败什么意思(淘宝系统繁忙无法购买)

  • x电容和y电容作用(x电容和y电容连接方式)

    x电容和y电容作用(x电容和y电容连接方式)

  • 苹果手机时间限额是什么意思(苹果手机时间限额怎么回事)

    苹果手机时间限额是什么意思(苹果手机时间限额怎么回事)

  • 小米10 4g网速慢(小米10网络很慢)

    小米10 4g网速慢(小米10网络很慢)

  • 苹果11慢动作为什么闪烁(苹果11慢动作为什么没有滚动屏幕)

    苹果11慢动作为什么闪烁(苹果11慢动作为什么没有滚动屏幕)

  • 苹果手机怎么弄水印照片(苹果手机怎么弄nfc功能门禁卡)

    苹果手机怎么弄水印照片(苹果手机怎么弄nfc功能门禁卡)

  • 3990x用什么散热器(3990x用什么风冷)

    3990x用什么散热器(3990x用什么风冷)

  • 抖音注销对方关注里还有我吗(抖音注销后关注我的人还可以看到吗)

    抖音注销对方关注里还有我吗(抖音注销后关注我的人还可以看到吗)

  • 华为nova5支持反向充电吗(华为nova5有反向充电功能吗)

    华为nova5支持反向充电吗(华为nova5有反向充电功能吗)

  • qualcomm snapdragon632是什么处理器(qualcomm snapdragon632g)

    qualcomm snapdragon632是什么处理器(qualcomm snapdragon632g)

  • 淘宝匿名评价不显示吗(淘宝评价匿名是不是别人看不到你的评价)

    淘宝匿名评价不显示吗(淘宝评价匿名是不是别人看不到你的评价)

  • 特别关心提示音怎么不响(特别关心提示音怎么设置)

    特别关心提示音怎么不响(特别关心提示音怎么设置)

  • 笔记本end键怎么按(笔记本电脑end键怎么按)

    笔记本end键怎么按(笔记本电脑end键怎么按)

  • 下载南瓜视频为什么要验证码(南瓜视频下载出错)

    下载南瓜视频为什么要验证码(南瓜视频下载出错)

  • 苹果xr有256g吗(iphone xr有256的吗)

    苹果xr有256g吗(iphone xr有256的吗)

  • 小米电视怎么下载浏览器(小米电视怎么下载爱奇艺)

    小米电视怎么下载浏览器(小米电视怎么下载爱奇艺)

  • 键盘如何清理灰尘(清理键盘灰尘的小妙招)

    键盘如何清理灰尘(清理键盘灰尘的小妙招)

  • 微信代扣业务怎么取消(微信的代扣)

    微信代扣业务怎么取消(微信的代扣)

  • Mac怎么设置屏幕保护?Mac屏幕保护程序使用教程(mac怎么设置屏幕保护壁纸)

    Mac怎么设置屏幕保护?Mac屏幕保护程序使用教程(mac怎么设置屏幕保护壁纸)

  • Win10 21H1 正式版已大规模推送部署,21H2 正式版即将到来(win10 21h1正式版怎么样)

    Win10 21H1 正式版已大规模推送部署,21H2 正式版即将到来(win10 21h1正式版怎么样)

  • 百香果的功效与作用(图片+文字)(百香果的功效与作用及食用方法果的籽能嚼碎吃吗?)

    百香果的功效与作用(图片+文字)(百香果的功效与作用及食用方法果的籽能嚼碎吃吗?)

  • 解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案(解决的英文)

    解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案(解决的英文)

  • 盆栽月季花怎么养?(盆栽月季花怎么修剪图解)

    盆栽月季花怎么养?(盆栽月季花怎么修剪图解)

  • 你的应用太慢了,给我司带来了巨额损失,该怎么办(应用加载慢)

    你的应用太慢了,给我司带来了巨额损失,该怎么办(应用加载慢)

  • 税后经营净利率什么意思
  • 当月购入固定资产计提折旧吗
  • 公司食堂菜金会计分录
  • 银行借记和贷记的区别是什么
  • 服务发票是增值税发票吗
  • 企业所得税申报时间
  • 办公室转租怎么给对方开发票
  • 重型开输机属于固定资产什么类别
  • 银行捐款了吗
  • 发票种类和适用范围
  • 垃圾处理的公司有哪些
  • 财务费用利息收入借方为负数是什么意思
  • 职工在异地住院怎么报销
  • 滞销款的最好销售办法
  • 建设单位收到施工承包单位的单位工程验收申请后应组织
  • 增值税抵扣期限多少天
  • 进口采购交的增值税
  • 电商刷单支付的佣金会计分录
  • 应收账款周转天数正常范围
  • 交通票报销有哪些
  • 增值税发票自查报告
  • 多交增值税如何做账
  • 押金算不算房租
  • 其他货币资金包括哪些项目
  • 优先股股息发放是啥意思
  • mac如何打印预览
  • PHP:curl_error()的用法_cURL函数
  • 一只躺在沙滩上的鸟
  • 汇算清缴哪些表必填
  • 交易性金融资产属于什么科目
  • 旅游企业会计ppt
  • 事件循环(Event Loop)
  • 巨浪向我冲来改为拟人句
  • 母子公司吸收合并税务处理
  • 人工智能 深度
  • 图像识别算法汇总表
  • 固定资产怎么盘点最快
  • javascriptjs
  • 小企业会计准则没有以前年度损益调整科目
  • 没有校验码的发票可以报销吗
  • 筹办分公司
  • 同城票据交换差额户金额从哪得来的
  • 固定资产一次性折旧账务处理
  • 税金及附加算什么
  • python tqdm是什么
  • 违约金是否计征消费税
  • MicrosoftSQLserver2014可以卸载吗
  • 公司法人代表可以有几个
  • 增值税专用发票抵扣期限
  • 应交税费要计提吗?
  • 用银行承兑汇票购买原材料会计分录
  • 接待客户的旅游活动
  • 进出口总额用什么字母表示
  • 农业行业增值税
  • 采购库存商品的分录
  • 进出口企业外汇额度
  • 差旅津贴和差旅补贴需要申报个税吗?
  • 企业的案例分析报告
  • 装修待摊费用当月摊销吗
  • 会计刚开始学什么
  • sql server m1
  • 数据库保护数据方式
  • mysql 5.7.13 winx64安装配置方法图文教程(win10)
  • 哪个是win8.1更新win10的补丁
  • Win10 Mobile 10572预览版新增中文简体五笔输入法
  • 分区显示
  • 虚拟机远程控制局域网
  • win8如何安装
  • 红石cpu教程
  • 没有启动界面
  • [置顶]电影名字《收件人不详》
  • get请求的url
  • js倒计时结束操作
  • unity3d怎么做游戏
  • pythonlist删除指定位置元素
  • 超清晰的壁纸
  • 增值额未超过扣除项目金额20%是什么意思
  • 不交社保申报个税有风险吗
  • 日本快递税率
  • 出口退税 即征即退属于政府补助吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设