使用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 相关文章推荐
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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
杏林同学录(三)
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python实现截屏的函数
2015/07/26 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
儿童编程python入门
2018/05/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python空元组在all中返回结果详解
2020/12/15 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
单位消防安全制度
2014/01/12 职场文书
活动邀请函范文
2014/01/19 职场文书
幼儿园老师寄语
2014/04/03 职场文书
10的分与合教学反思
2014/04/30 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
初级党校心得体会
2014/09/11 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle