伪元素实现背景毛玻璃

2024-10-20

用CSS伪类实现毛玻璃效果

效果图: 思路: 内容容器需要一个before伪类,负责引用跟背景容器相同的背景图,还需要一个after伪类,用来加上半透明的白色背景.这两个伪类的层级需都为-1,而内容容器本身的层级为1,这样做可以使内容在毛玻璃上层.而之所以不把背景图和背景颜色都写在一个伪类中是因为我们只需要对图片做模糊处理,而半透明的after伪类扮演的是一个遮罩层的角色.在负责背景图的伪类中,background-position与背景容器的background-position应相同,且背景图伪类的background

HTML5字体、伪元素、背景

1.字体样式: 选择器 { font:font-style font-weight font-size / line-height font-family:} 例:p { font: italic bold 14px / 1 ' 宋体 ' :} 注意:使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开不需要的属性可以省略,但必须保留 font-size 和 font-family 属性,否则 font 属性不起作用. 2.结构(位置)伪类

理解:Before和:After伪元素

CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用. 之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章,下面我们要详细的再说一下. 事实上,伪元素在CSS里

前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.

能用padding，margin解决的不要使用伪元素，能用背景解决的也不要用伪元素

能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素

《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行先看下HTML代码,如下 <div class="demo1"> <div class="text"> <span>当爱的故事剩听说</span> <span>我找不到你单纯的面孔</span> </div> </div> 默认显示效果: 一般情况下,我们喜欢直接在第一个span元素后面加

3、前端--伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型

伪元素选择器 # 首字调整>>>:也是一种文档布局的方式 p:first-letter { font-size: 48px; /*字体大小*/ color: red; } # 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 p:before { content: '嘿嘿'; color: red; } <p>::before言而有信品行端正光明磊落待人以诚</p> # 在文本的后面通过css动态渲染文本>>>:

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和

CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴

浅谈css的伪元素::after和::before

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验. 一.概念: 1.定义 The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element.

Effective前端4：尽可能地使用伪元素

伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅. 更好的阅读体验移步:http://yincheng.site/using-before-after 1. 伪元素使用场景伪元素一般是用于画图,特别是那种无关紧要的分隔线.点之类的小元素,如下图的绿框所示: 上面第一张图的分隔线,就是用before画的.只需要给div套一个类,这个类写一个bef

伪元素::after和::before

::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本的效果是这样的: CSS代码 div::after { content: "你好"; } HTML代码 <div>  你好 </div> ::before跟::after完全类似,只是它插入的内容会出现在其它内容之

转载【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover .active 的明暗变化请点击转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 3.增强用户体验,使用伪元素实现增大点击热区.适合用在点击区域较小的移动端,PC端看上去是

CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴影的颜色. 示例代码: <!DOCTYPE html> <html> <head> <meta char

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button Styles 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用

W3School-CSS 伪元素 (Pseudo-elements) 实例

CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例轮廓(Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-clas

::before和::after伪元素的用法

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:

CSS ::before 和 ::after 伪元素另类用法

原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将

理解伪元素 :Before 和 :After

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定听说过这个词,尤其是当你一直关注着我们的教程.点此浏览原作者的其他文章事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after.但是,就本文而言,我们将把我们探讨

css伪类选择器及伪元素选择器

1.类选择器在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定义好的选择器. 最常见的伪类选择器 a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active

HTML和CSS设置动态导航以及CSS中伪元素的简单说明

HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javasc

伪元素实现背景毛玻璃

热门专题