使用CSS实现黑白格背景效果


Posted in HTML / CSS onJune 01, 2022

需求介绍

在页面上,有时会需要展示一些透明背景的图片,为了展示其透明的背景,通常会像PS一样,使用黑白相间的格子组成背景,从而告诉用户,这是一张透明的图片。

效果预览

使用CSS实现黑白格背景效果

实现原理

1.利用渐变(background: linear-gradient())的效果来实现黑白相间,如下代码:

<style>
    #app {
	width: 200px;
	height: 200px;
	background: linear-gradient(
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
        )
    }
</style>
</head>

<body>
	<div id="app"></div>
</body>

效果:

使用CSS实现黑白格背景效果

2.然后加以旋转,使渐变背景倾斜,代码:

#app {
	width: 200px;
	height: 200px;
        background: linear-gradient(
                45deg,
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
       );
}

效果:

使用CSS实现黑白格背景效果

3.然后设置背景大小,并且使其自动平铺填充background-repeat:repeat;, 因为默认就是平铺,所以不用特地设置这个值,只需设置背景大小即可:

#app {
	width: 200px;
	height: 200px;
        background: linear-gradient(
                45deg,
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
       );
       background-size: 20px 20px;
       
}

效果:

使用CSS实现黑白格背景效果

4.通过以上操作,发现基本实现了一半的效果,毕竟需求是方格,而不是三角形,那么每个格子只需要再来一个三角形即可,为了方便区分,另一个颜色先设置为red:

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      red 25%,
      transparent 25%,
      transparent 75%,
      red 75%,
      red 100%
    );
}

效果:

使用CSS实现黑白格背景效果

5.可以看到,两种渐变重叠在一起,这时候需要分别设置两种渐变起始位置,使其分开,为了实现这个效果,将红色渐变的起始位置向左、向下平移背景大小一半的距离:

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      red 25%,
      transparent 25%,
      transparent 75%,
      red 75%,
      red 100%
    );
  background-position: 0 0, 100px 100px;
}

效果:

使用CSS实现黑白格背景效果

6.到此为止,已经实现我们需要效果了,接下来只需要将红色设置为灰色,然后设置背景的大小,将背景平铺即可,完整代码如下:

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    );
    /* 背景大小必须小于盒子的大小 */
    background-size: 20px 20px;
    /* 第二种渐变的偏移必须为为背景大小的一半 */
    background-position: 0 0, 10px 10px;
}

效果:

使用CSS实现黑白格背景效果

至此,黑白格背景效果实现完毕。

到此这篇关于使用CSS实现黑白格背景效果的文章就介绍到这了,更多相关css黑白格背景内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
You might like
php木马webshell扫描器代码
2012/01/25 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
json跨域调用python的方法详解
2017/01/11 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
为什么要做架构设计
2015/07/08 面试题
名人演讲稿范文
2013/12/28 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
店铺转让协议书
2015/01/29 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书