使用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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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中常用的预定义变量小结
2012/05/09 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python计算时间差的方法
2015/05/20 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
入党转预备思想汇报
2014/01/07 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
委托书样本
2014/04/02 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
旷工辞退通知书
2015/04/17 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书