【CSS】三行实现一个黑白网格背景（渐变）

最新推荐文章于 2023-11-29 08:04:04 发布

Mancuoj

最新推荐文章于 2023-11-29 08:04:04 发布

阅读量877

点赞数 3

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

本文链接：https://blog.csdn.net/Mancuojie/article/details/120877571

版权

在这里插入图片描述
最近还在学习前端，看见VScode调色板里的背景是这种黑白格，我就试着用CSS复刻一下。

源代码就是三行，可以通过调节size和position来改变格子大小，希望能给个👍：

body {
   
    background: linear-gradient(
        			45deg, 
                    rgba(0, 0, 0, 0.4) 25%, 
                    transparent

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mancuoj

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS绘制渐变黑白背景栏

富尔牛的博客

03-17

764

CSS渐变绘制黑白背景栏1. 简单的CSS效果预览2. background没错，你没有看错，就是这么简单，如果还想了解更多CSS实用技能，请继续关注！ 1. 简单的CSS效果预览看完了上面的一些CSS样式，你会不会以为就是通过一个image链接的一张图片呢，其实这些都是通过一行CSS实现的。 2. background 我们通常会使用background属性来为网页添加背景图片，来实现炫酷的背景效果。其实处理添加外部的背景图片，我们还可以通过radial-gradient、linear-grad

css黑白渐变透明,CSS3透明+渐变

weixin_35073008的博客

08-03

1048

Yes. You can use rgba in both webkit and moz gradient declarations:/* webkit example */background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)),to(rgba(80,80,80,0.2))...

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

利用css让整个网站变黑白色，图片也是黑白色

qq_35761056的博客

12-02

260

CSS的 filter: grayscale(100%);属性即可实现灰度效果，元素设置 filter: grayscale(100%) 属性整个元素里的内容全部显示黑白颜色，包含图片内容。之前也没做过这样的内容，第一感觉就是图片要重新设计黑白色，布局颜色都要修改。但看到好多网站瞬间变黑白色，感觉一定有更好的解决方法。后面才找到filter属性解决了。今天接到一个需求，老板要求小程序首页变成黑白色。

CSS背景黑白色

TianQiWanLaiQiu的博客

12-27

299

filter （适配多种浏览器） filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);

黑白背景CSS设置

Mole‘Home的博客

04-04

499

黑白色CSS代码 html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }

CSS新特性:圆角边框多栏Gird布局背景设置

09-27

本文将深入探讨三个重要的CSS3特性：圆角边框、多栏布局以及背景设置，它们极大地提升了网页的视觉效果和用户体验。首先，圆角边框是CSS3引入的一项革命性变化。在Web2.0时代，为了实现圆角效果，开发者需要使用...

背景是不规则图案css,CSS3 实现花式背景图案

weixin_28677451的博客

08-03

1353

CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景，事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果，例如参照css3patterns。本篇就举几个例子介绍一下它们实现的原理。网格桌布 Blueprint grid先画格子线：.bluePrint{width:180px;height:120px;background-color:#...

CSS3 SVG网格六边形图案特效.zip

10-08

【CSS3 SVG网格六边形图案特效】是一个利用现代Web技术实现的创新视觉设计方法，主要结合了CSS3和SVG（Scalable Vector Graphics）的优势，用于创建具有吸引力的、可自定义的六边形网格布局。这个特效代码提供了一个...

给我写一段代码实现一个网页上有一个三行两列的竖线，两列之间用红色渐变竖线隔开

09-04

你可以使用HTML和CSS来实现一个网页上有一个三行两列的竖线，并在两列之间使用红色渐变竖线隔开。首先，在HTML中创建一个包含三行两列的网格结构。你可以使用元素和CSS的网格布局来实现： ```html ...

纯css实现渐变，条纹背景

往后橘生

04-08

2068

1、body { background:linear-gradient(#51B0E7 50%, #006084 50%); background-size:100% 20px; }2、body { background:#FFF; margin:50px; background:linear-gradient(45deg, #3498DB 50%, #2980B9 50%);...

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

weixin_36048512的博客

08-04

1251

好看。嘻嘻！！！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 高级技巧汇总：彩色图像转黑白，CSS渐变，CSS过渡，3D转换

weixin_39755824的博客

11-29

111

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-f...

生成黑白相间的网格(位运算)

CoderZhuuu

08-12

622

import java.awt.BorderLayout; import java.awt.Color; import java.awt.GridLayout; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; public class MyFrame { private sta...

html灰网格背景代码,css实现网格背景

weixin_42504058的博客

06-10

469

https://www.cnblogs.com/laixiangran/p/8999711.htmlhttps://www.cnblogs.com/Anita-meng/p/7867662.htmlcss实现网格背景.content{width: 100%;height: 100%;background: linear-gradient(90deg,rgba(206,214,224,.32) 1p...

css3暗黑主题,整个纯 CSS 实现暗黑模式方案

weixin_36047554的博客

08-04

865

整个纯 CSS 实现暗黑模式方案:checked、+/~和 filter 三个点进行，缺一不可。看似简单，若不是常用 CSS 做特效也很难想象出区区三个点打辅助也能完成一个这么强大的功能。网站主体.ios-switch {...&:checked {...& + .main {filter: invert(1) hue-rotate(180deg);img,video,.exclu...

CSS 实现背景图渐变色，任意切角

Simon的博客

07-06

2760

效果图 1、实现背景颜色渐变 background: linear-gradient(#F99A17, #EE5234, #F72C20); 从上到下渐变颜色 background: linear-gradient(-90deg, #F99A17, #EE5234, #F72C20); 从左到右渐变颜色 radial-gradient(red, green, yellow); 从里到外渐变颜色 2、实现背景圆角 border-radius: 50%; border-radius: 30rpx, 2

CSS盒子模型——渐变问题（边框&背景）

zg0601的博客

10-16

5301

CSS盒子模型边框背景渐变问题

用纯 CSS 实现网格背景