css 背景透明_纯CSS3实现的几款条纹大背景

最新推荐文章于 2023-01-31 20:25:35 发布

周林深

最新推荐文章于 2023-01-31 20:25:35 发布

阅读量145

点赞数

文章标签： css 背景透明

本文链接：https://blog.csdn.net/weixin_35778603/article/details/113053368

版权

来源 | https://www.jianshu.com/p/6c0be84baf3a

1、实现不等宽背景条纹

实现如上图所示的效果，代码如下：

<html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">      .cont{
                    width: 500px;               height: 200px;               background: -webkit-linear-gradient(#78C9DC 70%, #0acfff 0%);               background: -o-linear-gradient(#78C9DC 70%, #0acfff 0%);               background: linear-gradient(#78C9DC 70%, #0acfff 0%);              background-size: 100%  20px;      }style>    <title>条纹背景title>head><body>    <div class="cont">    div>body>html>

其他效果：⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补
⑵如果需要等宽切无过渡的渐变，开始和结束值设置为50%即可。
⑶如果想要垂直条纹，你只需要调整background-size的x、y值即可。

2、瓷砖条纹背景

实现如上图所示的效果，代码如下：

<html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">     .cont{

最低0.47元/天解锁文章

周林深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 背景透明_纯CSS3实现的几款条纹大背景

来源 |https://www.jianshu.com/p/6c0be84baf3a1、实现不等宽背景条纹实现如上图所示的效果，代码如下：<html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> .cont{ ...
复制链接

扫一扫