开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

纯css背景变黑弹出大图

基础概念

纯CSS背景变黑弹出大图是一种常见的网页设计效果，通常用于图片展示或视频播放前的预览。这种效果通过CSS实现，不需要JavaScript或其他脚本语言的辅助。

相关优势

性能优越：纯CSS实现，加载速度快，对服务器压力小。
兼容性好：大多数现代浏览器都支持CSS3动画和过渡效果。
易于维护：CSS代码相对简单，便于后期修改和优化。

类型

背景变黑：通过设置背景颜色为黑色，并逐渐加深透明度，实现背景变黑的效果。
弹出大图：在背景变黑的同时，显示一张大图，通常通过CSS定位和动画实现。

应用场景

图片展示：在图片库或相册中，点击某张图片时，背景变黑，弹出该图片的全屏预览。
视频播放：在视频播放前，背景变黑，弹出视频封面图，提升用户体验。
广告展示：在网页中插入广告时，背景变黑，弹出广告图片，吸引用户注意力。

实现方法

以下是一个简单的示例代码，展示如何使用纯CSS实现背景变黑弹出大图的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Background Blackout with Large Image</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            position: relative;
            width: 80%;
            max-width: 800px;
        }
        .image {
            width: 100%;
            transition: transform 0.5s ease-in-out;
        }
        .image:hover {
            transform: scale(1.2);
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 1;
        }
        .container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/800x400" alt="Sample Image" class="image">
        <div class="overlay"></div>
    </div>
</body>
</html>

参考链接

遇到的问题及解决方法

背景变黑不彻底：可能是由于其他元素的层级（z-index）设置不当，导致背景无法完全覆盖。可以通过调整.overlay的z-index值来解决。
图片放大效果不明显：可能是由于transform属性的缩放比例设置不当。可以适当调整.image:hover中的scale值。
动画效果不流畅：可能是由于浏览器性能问题或CSS动画过于复杂。可以尝试简化动画效果，或使用will-change属性优化性能。

通过以上方法，可以实现一个简单且高效的纯CSS背景变黑弹出大图效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

纯CSS 波点背景 🏀

这次要用纯CSS做一个波点背景，先上图看看效果。我把这个效果写在 body 上，如果你不喜欢这个配色也可以自己手动改改。...再配合默认给个背景色，应该差不多可以了。\n\n需要提醒一下，background-image 不单只能插背景图，也可以通过代码实现渐变效果（之前遇到一些实习生不清楚这点~）。...设置默认背景色 background-color\n1....设置圆形背景 background-image: radial-gradient\n\n于是代码变成这样\n\n\n\n body {\n width: 100%;\n height

6092 0

纯CSS 红砖背景墙

本文简介点赞 + 收藏 + 关注 = 学会了先上图看看效果再介绍我把这个想过设置在 body 标签上了，所以整个网页的背景都变成了红砖效果。...在很多很多年前，我购买了《CSS揭秘》这本书，在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》，里面的每个例子都让我拍案叫绝。...在我个人看来，这本书是每个打算从初升高的前端必读的css书籍，它是一本进阶级的书，不会跟你讲过多的css基础。...再和我的分析做对比~ 动手实现直接给答案：用 background-image 的渐变来实现；用2个直角三角形可以组合成1个矩形，而这两个三角形又有点色差的话，就能做出类似砖块的效果~ 其实本例和《纯CSS...实现格子背景（国际象棋棋盘）》有点像，如果你读过格子背景那篇文章会更容易理解本文。

3952 0

重学---css背景与精灵图

记住，最核心的一点就是背景是在css定义的不是在html定义的啊效果： ![效果：](https://img-blog.csdnimg.cn/20201030092928735.png?...背景缩写 css精灵图： 40-CSS精灵图图主要用的是定位·背景background-position 效果： ?

4474 0

纯CSS根据图片取色设置背景色

韩国动漫视频网站截图.jpeg 前几天无意间访问到了个韩国的动漫视频站，然后看到个页面每个div背景色都不同疑似根据图片进行的取色，然后就想看看他是用什么js设置的，f12一看发现好像不是js，然后我就以为是写死的...Html部分的核心代码图1...:url(图3)"> 图1)"> Css部分核心代码...center top; background-repeat: no-repeat; filter: brightness(0.9); } 分析从代码里可以看到，实际上他就是用来把图1...设置成了背景，然后使用background-position: center top;让背景图x轴居中y轴靠上，然后再使用background-size: 20000%;将背景图放大200倍，然后图片背景看起来就是纯颜色的了

1.3K1 0

纯CSS 实现格子背景（国际象棋棋盘）

本文简介点赞 + 收藏 + 关注 = 学会了这次会使用css画出一个格子背景。并且一步步分析如何实现~ 思路直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。...做一个45度的线性渐变，第一个颜色是#000（黑色），占整个背景贴片的25%，其余部分都是红色。在上面的基础上，用 background-size 来控制背景贴片的大小。...最后需要提醒的是，在本例中 background-position 第二个渐变的位移是 background-size 的一半，这样就能实现这种格子背景了~ 完整代码 html,...#000 0); background-position: 0 0, 100px 100px; background-size: 200px 200px; } 这是做成背景的完整代码

6022 0

记个笔记纯CSS简单图

Document .con { position: relative; left: 36px; top: 36...

1593 0

纯CSS实现“精灵图”动态特效

一、什么是精灵图？什么的是精灵图呢？首先我们来看了一下京东官网的一个例子：鼠标移入之前这个“相机”的是白色的，移入之后变为了红色：这就是一个精灵图的案例。...我们这里不使用JS，只用一张图片，利用CSS实现。素材只需要一张图片：只要我们改变图片的位置，就可以实现“精灵图”。下面我们来利用CSS进行实现。...三、CSS实现 1、插入背景图片在浏览器中的显示效果为: 2、进行定位在浏览器中的显示效果为: 3、改变大小实现截取在浏览器中的显示效果为:...4、利用背景图定位“切换”图片在浏览器中的显示效果为: 5、实现“精灵图”动态切换利用获取焦点时改变样式的属性hover实现“切换”：这样我们就最终实现了...“精灵图”的CSS动态特效。

1.3K3 0

简单的纯CSS3白云飘动背景特效

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云，以不同的速度进行运动，形成白云飘动的效果。 ?.../div> CSS

1.9K5 0

CSS_背景图的使用

1、在body设置属性为height:100%时其实不能是100%的，因为这个高度是相对于父元素，body的父元素为html标签，这时候可以设置：

7281 0

使用纯css制作类似轮播图效果

思路: 首先先定义一个足够宽的大容器例如300vw 三个页面宽度的大小里面放3个小盒子每个小盒子占满全屏,100vw 100vh 点击下面的按钮然后选择大容器元素给大容器的left值 (相对定位...-- 这里定义三个box相同的类名,是为了在css写三个盒子的共同样式 --> CSS...align-items: center; user-select: none; padding: 40px } /* 设置每个页面的背景颜色...渐变 — 生成器、制作器和背景 (cssgradient.io)

891 0

css3 - 纯css实现一个轮播图

以上gif，只用到了5张图片，一个html+css，没有任何js。然后实现了自动轮播效果。具体代码如下：结构布局 css...实现轮播图除去普通布局样式后的 css...欢迎评论不足之处~】源码地址： https://github.com/xingorg1/jsStudy/tree/master/css%E5%AE%9E%E7%8E%B0%E8%BD%AE%E6%92%

2.5K3 0

纯 CSS 实现漂亮的大标题效果

简单的代码，通过特定的组合，往往能带给人意想不到的效果~ 复古风格实现代码： .vintage { backgrou...

2.7K2 0

纯CSS制作多扇区饼图和环形图

考虑到我们只需要显示一个静态的饼图，就在想能否用Css直接画一个出来呢。这样代码量少，运行速度还更快。毕竟一般的图标空间都是一大堆代码，运行都需要时间的。...还真找到网上有用Css画饼图的，于是就Copy代码运行了下，第一感觉还挺不错的。正准备大量修改用于项目的时候发现，尽然只支持2个扇区的饼图。心顿时凉了大半截。同时彻夜未眠......虽然彻夜未眠，但还真想出一个用CSS画多扇形饼图的方案。先出一个效果图： image.png 利用到的Css特性：圆角旋转 View/Div重叠一、绘制原理： 1....在第一个区域放置一个和区域一样大的view/div, 并设置背景，然后进行旋转 Css旋转是以为View/Div中心点进行旋转的，所以还需要设置旋转的中心 width:100%;height:100%;...html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 纯CSS

4.8K4 0

纯CSS：动态渐变背景【一分钟学会】

原理规定好容器尺寸设置渐变背景： background: linear-gradient(...)...自己设置角度和颜色吧设置背景尺寸比容器大几倍：background-size: 600% 600%; 搞个循环动画，控制背景移动：background-position 动手实现直接上代码，对照着..."> .gradient { /* 设置容器尺寸 - 原理1 */ width: 400px; height: 400px; /* 背景渐变色...- 原理2 */ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); /* 背景尺寸 -...通过鼠标当前所在位置控制背景色的渐变效果。这大概也是视差效果的一种吧，可以结合《视差特效的原理和实现方法》的原理实现。

2.2K2 0

纯CSS：动态渐变背景【一分钟学会】

原理规定好容器尺寸设置渐变背景： background: linear-gradient(...)...自己设置角度和颜色吧设置背景尺寸比容器大几倍：background-size: 600% 600%; 搞个循环动画，控制背景移动：background-position ?..."> .gradient { /* 设置容器尺寸 - 原理1 */ width: 400px; height: 400px; /* 背景渐变色...- 原理2 */ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); /* 背景尺寸 -...通过鼠标当前所在位置控制背景色的渐变效果。

9330 0

如何通过纯CSS实现网页的平滑滚动背景渐变效果

摘要本文介绍了如何通过纯CSS实现网页的平滑滚动背景渐变效果，以提升网站的美感和动态感，为用户提供舒适的浏览体验。...文章首先解释了背景渐变效果的实现原理，然后详细阐述了平滑滚动背景渐变效果的实现步骤，包括创建滚动容器、添加背景渐变效果以及添加滚动事件监听器等。...背景渐变效果实现原理在实现平滑滚动背景渐变效果前，我们先了解一下背景渐变的实现原理。CSS中可以通过linear-gradient()函数实现背景渐变效果。...通过JavaScript给容器添加滚动事件监听器，以便在滚动过程中更新背景渐变的位置。...通过计算比例progress，实现背景渐变位置的平滑滚动效果。最后，通过设置backgroundPositionY属性将更新后的变量应用到背景渐变。完整代码示例 <!

5631 0

实例：纯CSS3实现饼状图

来源 | http://www.fly63.com/article/detial/712 有一些网页中,有时候会碰到饼状图的需求，比如统计图表，进度指示器，定时器等，实现方式也是各种各样，现在也有不少现成的...这里笔者为大家演示一种纯css实现饼状图效果的方法。...改变rotate的角度就可以实现不同大小的饼状图效果，但是亲手试验的读者会发现，旋转50%以上并不能呈现出理想的效果，而是会呈现出如下效果： ?...要解决这个问题，改变伪元素的背景色就可以解决，当需要展示的区域大于一半时，改变背景色就OK。下面笔者展示一个简单的进度指示器示例，读者亲手试验的话，会发现一个不断变化的饼状图效果。...如果读者对svg感兴趣的话，可以尝试使用svg来实现饼状图，svg实现的效果要更加丰富多彩些。本文完〜

1.7K2 0

【前端切图】CSS文字渐变和背景渐变

CSS属于前端里面最简单的东西，也是最基本的，但真正也没有多少人敢说自己精通CSS，因为其中的学问还是太多了，但作为前端工程师，每一次写出那些花里胡哨的炫酷界面的时候，都少不了这些的支持，因此，一定要好好打打牢基础...今天写一个特别简单的属性，CSS文字渐变，因为设计师为了体现一下炫酷的界面，把标题改成了渐变色了，虽然切了标题图片，但不如自己用css写，之后还可以更改标题。一： CSS文字渐变化工厂人员定位系统效果图...背景渐变其实也很简单，顺便一道写了，移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。...实现背景渐变效果 css"> .linear{ /*仿支付宝背景蓝色渐变*/ background-image: linear-gradient(to

2.2K3 0

港大Loam-纯雷达建图

虽然这样，但是忙了这么久了，有点难过，后来找了找有没有不用IMU的框架，然后就有了这篇文章，但是我有个疑惑的地方，我个人感觉MID-40雷达自己是带有IMU的，因为在驱动里面我找到了这样的开关，以及在建图的过程中下面车辆微小的动作也可以在图中有体现...该算法的测距和建图部分均可以同时在MacBook上以 20 Hz 的频率实时运行（工友的本子没有跑起来）。官方测试的是Ubuntu16,18的版本（64bit），我这里使用的是20.04....opencv4 验证 roslaunch loam_livox livox.launch roslaunch livox_ros_driver livox_lidar.launch 先运行第一个节点，启动接收和建图的线程...建图的时候，室内还是算了，雷达一扫百米，室内实在是憋屈啊。

6583 0

【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐

总结注意：此文章只是单纯实现音乐图标的旋转和暂停的切换，没有对背景音乐的暂停和播放进行处理； css3 的动画功能很强大，但是同时需要我们处理好不同浏览器的兼容性处理！

3.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭