3.案例：伪元素做土豆网遮罩层

最新推荐文章于 2022-07-13 23:57:30 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2022-07-13 23:57:30 发布

阅读量149

点赞数

分类专栏： html5 css3 提高

本文链接：https://blog.csdn.net/lazylYYY/article/details/118943041

版权

html5 css3 提高专栏收录该内容

19 篇文章 0 订阅

订阅专栏

 <style>
        .bg {
            width: 521px;
            height: 540px;
            position: relative;
            margin: 100px auto;
            background-color: pink;
        }

        .bg img {
            width: 100%;
            height: 100%;
        }

        .bg::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(../img/arr.png) no-repeat center;
            display: none;


        }

        .bg:hover::before {
            display: block;
        }
    </style>

<body>
    <div class="bg">
        <img src="../img/mei.jpg" alt="">
    </div>

</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

美美| ू•ૅω•́)ᵎᵎᵎ

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.案例：伪元素做土豆网遮罩层

.
复制链接

扫一扫

专栏目录

利用伪元素来做鼠标经过有遮罩层的效果（98）

weixin_45147894的博客

07-06

375

<!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><...

给auto的图片用伪元素设置一个遮罩层

farmerXU的博客

04-21

293

主要：给img标签用div包裹住，div转成行内块元素，最后使用伪元素定位加一个遮罩层；代码： <style type="text/css"> .basictext4 img{width: auto;display: block;margin: 0 auto;} .basictext4 .wrap{text-align: center;} .basictext4 .wrap .pic_img{display: inline-block;} .basictext4 .wrap .pic_

参与评论您还未登录，请先登录后发表或查看评论

伪元素中遮罩层的简单使用

wu520xin的博客

01-14

742

在HTML中创建一个div，命名为box，然后在里边再建一个div命名为box1，然后进行如下设置。 .box{ width:50px; height:50px; background:#333; position: relative; .box{ width:50px; height:50px; backg

伪元素法简易遮罩层

weixin_55559151的博客

02-13

574

<!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" /> <titl

HTML(Basic) Chapter6(Pink) 综合案例土豆网遮罩层的制作

LeungSr的博客

07-20

429

文章目录基础知识总结HTML源代码（轮播图.html）最终效果写在最后基础知识总结标准流：可以让盒子上下排列或者左右排列，垂直的会计盒子显示就使用标准流布局使用浮动可以让块级盒子放在一行显示如果需要某个模块在网页中固定在页面中的某个位置，或者压住某个盒子，则需要定位 HTML源代码（轮播图.html） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .

HTML5&CSS3网页制作：伪元素选择器.pptx

06-01

CSS3 中的 `:before` 和 `:after` 伪元素选择器提供了这样的功能。 1. `:before` 选择器： `:before` 伪元素选择器允许我们在元素的内容前面插入内容。例如，如果我们想在一个段落前添加一个引号，可以这样编写CSS...

CSS伪元素：after：before的特殊用法demo

06-19

`:after`和`:before`伪元素在CSS3中被引入，它们分别在元素的内容之后和之前插入内容。通常，这些内容由`content`属性定义，可以是文本、图像或其他CSS生成的内容。让我们逐一深入探讨这些伪元素的特殊用法。 1. **...

CSS3中伪元素::before和::after的用法示例

09-24

before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...

CSS3鼠标经过图片遮罩层代码.zip

07-11

本项目"CSS3鼠标经过图片遮罩层代码"是针对Bootstrap 3.3.5框架的一个实现，它允许在用户将鼠标悬停在图片上时显示一个遮罩层，同时提供动态的视觉效果，以增强用户体验。Bootstrap是流行的前端开发框架，它提供了...

伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)

...

08-13

315

伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!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="i

HTML+CSS 土豆网鼠标经过显示遮罩

不爱吃菜的菜菜的博客

03-29

386

！！！当鼠标经过时，让里面的遮罩层显示出来： .tudou:hover .mask { display:block; }//当经过tudou时，显示mask里面被隐藏的东西 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed...

土豆网案例-鼠标经过显示遮罩

WangZhang_521的博客

01-04

453

土豆网案例-鼠标经过显示遮罩 <!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">

[css3] 动画案例---会呼吸的圆

qq_14993591的博客

08-17

2054

<!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>Do

尚硅谷html练习-背景重复

weixin_58264104的博客

07-13

397

尚硅谷html练习-背景重复

三十一、综合案例—土豆网鼠标经过显示遮罩

付之一笑的专栏

01-05

296

案例：土豆网鼠标经过显示遮罩练习元素的显示与隐藏练习元素的定位核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

CSS实现播放器Demo样式

weixin_43837268的博客

10-10

808

伪元素选择器使用场景【视频播放遮罩层】

weixin_43837268的博客

10-11

510

前端学习（295）：媒体查询语法

歌谣的博客

01-02

261

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...

CSS伪类实现遮罩层效果

weixin_43358075的博客

05-11

2550

CSS中的伪类可以更方便的帮助我们定义过渡效果，这里，我们详细介绍一下利用:hover实现遮罩层效果。:hover是指当鼠标悬停在元素上时所发生的效果。实现遮罩层的步骤需要两个相等大小的元素。两个元素的位置应该相同。 遮罩层元素应该为黑色背景，白色字体。鼠标在未悬浮到元素之上时，遮罩层应该透明。鼠标在悬浮到元素之上时，应该减少遮罩层的透明度。为遮罩层加上过渡时间。效果展示色彩因...

解释.clearfix:after, .clearfix:before { display: table; content: " "