HTML使ol/ul的背景透明度不影响里面的li

最新推荐文章于 2022-11-24 11:03:53 发布
原创 最新推荐文章于 2022-11-24 11:03:53 发布 · 967 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html5

博客作者在尝试为小圆点父级添加透明背景时遇到问题，发现这会影响到子级的背景色，即使设置了子级的opacity:1也无法解决。通过研究源码，作者找到了解决这个问题的方法。文章详细介绍了这一过程，并分享了实现透明背景而不影响子元素颜色的技巧。

先看我拼的一张图吧 ⬇
在这里插入图片描述
其实就小圆点父级的透明背景的有无，就感觉别人的高级好多。

于是我也尝试加透明背景，结果发现，单单给父级加透明背景，会影响子级的背景色， 就算给子级添加opacity: 1属性也无济于事。 ⬇
在这里插入图片描述
然后经过研究人家的源码，找到了解决方案 ⬇
在这里插入图片描述
除了标注的，其他的代码均没有变化

问题解决

HTML5如何制作轮播透明效果,js前端开发实现banner轮播透明切换
weixin_29885875的博客
06-04 433
/p>前端开发body,p,ul,li,ol,dl,dd,button,input,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}ul,ol{list-style:none;}a{text-decoration:none;}img{display:block;border:none;}.clearfix{zoom:1;}.clearfix:after{displ...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7793
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS笔记（八）盒子模型-----定位
weixin_45904557的博客
03-10 3193
1.当某个元素可以自由的在盒子内移动，并且压住其它盒子 2.当我们滚动窗口时，盒子是固定屏幕某个位置的 以前的标准流和浮动无法实现上述效果 所以， 浮动和定位的区别： 1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子 定位： 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定
css伪类选择器及透明度----代码
w_meng_zhao的博客
11-24 452
* 找到一组元素中的第一个li */1.4、页面显示hello world。1.3、找到一组元素中的最后一个li。1.2、找到一组元素中的第一个li。1.1、ul中所有的li变成红色。1.3、找到某一个元素中的某一个。
html中如何将图片作为背景，将背景透明而网页内容不透明
qq_53945199的博客
04-22 2万+
目录 文章目录 前言 一、这种方法适用在那种场景？ 二、使用步骤 1.作为全屏背景 2.部分区域背景 总结 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 许多小伙伴在做前端背景时，改变透明度时会让页面的其他内容都变得透明，或者直接使用了background这个标签，但是却无法将背景变得透明，出现这种情况，怎么办呢？ 提示：以下是本篇文
html ul背景颜色 和文字颜色,UL和浮动DIV：列表文本换行但背景颜色不换行(示例代码)...
weixin_28732953的博客
06-22 975
需要帮助浮动DIV和列表。 DIV浮动到页面的右侧，而列表条目围绕它流动。问题是，在将背景颜色应用于列表的LI元素时，颜色会拉伸全宽度，而文本会在到达DIV时进行包装。在保持LI的显示为块的同时，如何使LI的包裹像文本一样的背景颜色？这是示例代码：.mydiv {height: 200px;width: 200px;background-color: red;margin-right: 45px;...
html页面透明背景,css 背景透明 元素(标签)背景透明的css设计
weixin_35665584的博客
06-03 892
今天要设计一个定位在图片上的标签，标签的背景要有一定的透明度，使用到了opacity的属性，过去没太注意这个属性的兼容性问题，结果采坑了。。。1.完成后的效果完成前后的效果应该是这样的：背景透明前 背景透明后　　 tag部分的html应该是这样的：复制代码代码如下:拉萨tag部分的cs...
<description><![CDATA[ <ul> <li>Fixed crash on launch</li> <li>Improved performance</li> </ul> ]]></description>这是啥
最新发布
11-29
- 提高透明度和用户体验 ### ✔️ 使用简单 HTML（仅限支持的标签） Sparkle 支持以下 HTML 标签（取决于版本和设置）： - `<ul>`, `<ol>`, `<li>` - `<p>`, ` ` - `<strong>`, `<em>` - `<a href="...">` 链接 ...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML元素标签及效果图
weixin_45967614的博客
07-25 909
HTML基础知识： （一）Web标准（重点）的构成： 1） 主要包括结构（Structure），表现（Presentation），*行为（Behavior）*三个方面。 2） 结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。 表现：表现用于设置网页元素的版本、颜色、大小等外观元素，主要指的是CSS。 行为：指网页模型定义及交互的编写，现阶段主要学的是Javascript。 可以简单理解为：**结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript文件中**。 （二
html中li标签重叠,ul嵌套，li加背景图片后出现重叠，请教如何解决_html/css_WEB-ITnose...
weixin_36451610的博客
05-31 1167
html css 问题描述：主要用于实现竖直菜单，主菜单有二级子菜单，想通过使用ul嵌套实现子菜单功能，菜单使用背景色没有问题，但替换成背景图片，结果使主菜单的ul与子菜单的ul重叠，一直未解决，请各位帮帮忙。具体代码如下：html代码:相关法规 操作员计算机IE设置电子签章办理须知相关下载CSS代码：回复讨论(解决方案)background:url(images/btn_m...
html图片上文字透明度不变,css怎么设置背景半透明文字不透明
weixin_28716723的博客
06-04 532
菜单CSS部分#header{height:60px;background:#fff;background:rgba(255, 255, 255, 0.5) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;width:100%;line...
【css伪类选择器及透明度——附项目图片及代码】
知而好问，然后能才
10-24 3921
小白一篇学懂css伪类选择器及透明度——附项目图片及代码
HTML5+CSS3之透明效果设置
weixin_44827643的博客
05-07 2426
介绍三种设置元素透明效果的方法： 1.设置opacity属性 2.设置rgba属性值 3.设置transparent为属性值（设置元素全透明） 代码及效果展示如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
IOS UILable 背景设置透明
jguangyou的专栏
09-14 445
如果将UILabel 的alpha 设置为0，label上的字体也看不见了，那应该怎么设置透明呢，很简单：label.backgroundColor = [UIColor clearColor]; 这样，背景就透明了，哈哈。...
html+透明度怎么改,如何更改HTML / CSS文本透明度？如何更改HTML / CSS文本透明度？(How to ch...
weixin_35012535的博客
06-28 453
我很新的HTML / CSS和我想显示一些文本像50％的透明。 到目前为止，我有HTML，以显示与完全不透明的文本THIS IS MY TEXT但是，我不知道如何改变其不透明度。 我试着在网上找，但我不完全知道该怎么跟我找到的代码做。Answer 1:检查不透明度 ，您可以在此CSS属性设置到div中， 或使用你想透明顺便说一句，字体标签被弃用 ，使用CSS样式文本div {opacity: ...
设置div背景透明的两种方法
weiyuexin的博客
07-07 9294
实现div背景透明的两种方法 1.使用opacity属性 background-color：#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度，但是也会影响里面的文字，效果图： 2、只改变背景透明度，不改变其中文字、图片等透明度的方法 background-color: rgba(0,0,0,0.5); 其中前三位数是设置背景颜色，取值范围是0~255，全部为零代表黑色，全部为255代表白色。 rgba即红色、绿色、蓝色、透明度（英语：Red, Green, Blue.
jQuery对li设置背景颜色和透明度
dream_miracle的博客
09-13 7940
在用jQuery对页面ul下的li进行mouseover和mouseleave设置背景颜色和透明度的设置时，发现当mouseleave时，本身在li里面的字体颜色变淡了。 代码如下： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html; ch...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z_yuyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值