css给图片底部加黑色渐变遮罩

最新推荐文章于 2025-03-11 20:08:06 发布

啄木鸟哥哥

最新推荐文章于 2025-03-11 20:08:06 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/wangzhichaogege/article/details/121399489

版权

css 专栏收录该内容

8 篇文章

订阅专栏

    position: absolute;
    z-index: 2;
    bottom: 0;
    height: 120rpx;
    width: 750rpx;
    opacity: 0.36;
    // 重点是这行
    background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

啄木鸟哥哥

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css3 加 hover 实现网页遮罩从下至上渐变拉伸效果

诗雨远方的博客

08-01

5642

css3 加 hover 实现网页遮罩从下至上渐变拉伸效果这种效果在很多稍微炫酷的网站都会用到，开始自己也一直琢磨怎么写，去了W3C上面看了一下有一个css3过渡效果，没错，文档就是它了http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1，但是一直感觉到很苦恼，它的效果是从上至下...

Vue+CSS实现渐变半透明遮盖文字点击显示全文取消遮盖

Akikang的博客

01-23

3089

1.目标效果 2.实现思路默认指定列表最大高度，显示【显示全文】按钮，在显示全文前插入遮罩div。点击显示全文后取消列表高度限制，隐藏【显示全文】按钮和遮罩div。 3.实现代码 html部分 <div class="notice_box"> <div> &l...

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

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

10-25

主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下

【CSS3】渐变阴影遮罩

weixin_55639808的博客

01-16

1632

水平,垂直偏移量长度单位模糊半径指阴影由完全的颜色到消失的长度，类于似渐变的长度。默认是0阴影大小默认是0，和原来一样大，单位px，正数表示放大，负数表示缩小颜色阴影颜色默认outset外阴影，可以写inset改成内阴影，不遮挡文字遮挡盒子，遮挡背景,可用逗号分隔，类似背景渐变，可叠加。

如何使用 CSS 实现黑色遮罩效果

最新发布

qq_60754128的博客

03-11

532

最近在工作中遇见了一个需求，鼠标经过盒子出现黑色遮罩，遮罩中有相关的编辑按钮，点击以后，进行图片上传并且展示，由于当时没有思路，思考了好久，所以在完成开发后进行总结，使用的技术栈是React+less+Antd，过程和解答过程都在下边了。

js基础【偶数倍背景相同颜色】

姗姗的博客

07-08

402

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

给图片加一个黑色半透明的遮盖层

piaoliangj的博客

02-05

9108

12.给图片加一个黑色半透明的遮盖层——软设问题总结12.1 知识点12.1.1 img标签::after和::before失效12.1.2 默认地，::after和::before是行内元素12.2 代码案例12.3 不使用img标签的另一种方法12.3.1 思路如下：12.3.2 代码如下 12.1 知识点在做这个效果的时候，想必第一想法都是先在img标签放图片然后再在img::before/::after元素设置遮盖层，但是会发现这个方法无法出现遮盖层。主要原因是： 12.1.1 img标签::a

遮罩层渐变css,CSS3蒙版、渐变、背景

weixin_29871897的博客

08-03

962

背景原点background-origin:padding-box;(默认)border-box | padding-box | content-boxbackground-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示background-clip:borde...

CSS3带标题鼠标悬停遮罩层特效

07-24

在实际的Web开发中，CSS3的悬停遮罩层特效不仅可以用于图片，还可以应用于其他类型的元素，如按钮、卡片等，使得用户界面更加生动和专业。同时，了解和掌握这些CSS3技术对于提升网页的交互性和视觉效果至关重要。

CSS3鼠标悬停图片遮罩动画特效特效代码

03-20

在本例中，"CSS3鼠标悬停图片遮罩动画特效"是一种常见的网页交互设计技术，旨在提升用户体验，增加网站的视觉吸引力。当用户将鼠标悬停在图片上时，会触发一个预定义的动画，通常表现为覆盖在图片上的遮罩层发生...

【CSS】css特效（阴影shadow 渐变gradient 过渡transition 变形transform 滤镜filter）

m0_50947589的博客

05-05

1747

css特效（阴影shadow 渐变gradient 过渡transition 变形transform 滤镜filter）

css3背景，渐变，蒙版

09-07

css3背景，渐变，蒙版背景切割背景原点背景尺寸rgba模式hsl模式线性渐变径向渐变给容器添加蒙版背景在文字区域可见倒影

css3中常用的背景，渐变，遮罩总结

qq_33404590的博客

11-24

676

css3 背景相关

CSS mask渐变遮罩动画

newmiracle学习天地

11-08

1565

CSS mask渐变遮罩动画 demo Title .img{ background: url(http://weiqunwang.net/demo/css3mask/kate.png) no-repeat; -webkit-mask-image:-webkit-linear

仿知乎问答颜色渐变遮罩CSS代码

轻功与猫

10-27

1608

颜色渐变代码（从透明到某色调） background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),#0084ff); */ background-image: linear-gradient(180deg,hsla(255,0%,100%,0),#fff);

CSS 圆锥渐变+MASK遮罩实现WIFI图标

苏苏就是小苏苏的博客

05-09

1153

👏CSS 圆锥渐变+MASK遮罩实现WIFI图标，速速来Get吧~🥇文末分享源代码。苏苏的bug。

驾驶舱地图渐变遮罩层 CSS

pwl124的博客

09-05

564

驾驶舱地图渐变遮罩层CSS

css3背景色由浅黑变深黑_css3 给背景设置渐变色的方法

weixin_31222161的博客

12-23

1600

css 给网页中的背景设置渐变色，css的渐变颜色可以指定固定的两个颜色之前的线性过度，这个css3属性只支持高版本的浏览器。//浏览器前缀background: linear-gradient(red, blue);background: -webkit-linear-gradient(red, blue);background: -o-linear-gradient(red, blue);ba...

黑色渐变背景css,css-渐变背景，爱了爱了。

weixin_36048512的博客

08-04

1308

好看。嘻嘻！！！Login登录import md5 from 'js-md5'import {mapActions} from 'vuex'export default {data () {return {formInline: {user: '',password: ''},ruleInline: {user: [{ required: true, message: '请填写用户名', tri...

CSS如何实现渐变背景图片 _css渐变背景色

01-08

### 使用 CSS 实现渐变背景色 ...这段代码首先加载了一张名为 'image.jpg' 的图片，并在其上面覆盖了一个带有半透明黑色遮罩的斜坡状渐变。最后通过设置合适的 `blend-mode` 值使得两者能够自然融合在一起[^1]。