斜杠css背景图

最新推荐文章于 2023-12-15 16:44:14 发布

LinDaiuuj

最新推荐文章于 2023-12-15 16:44:14 发布

阅读量746

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sinat_38992528/article/details/104648138

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .stripes {
           height: 80px;
           width: 200px;
           float: left;
           margin: 10px;
           -webkit-background-size: 5px 5px;
           -moz-background-size: 5px 5px;
           background-size: 5px 5px; /* 控制条纹的大小 */
               border: 1px solid pink;

           }

           .angled-135 {
           background-color: pink;
           /* background-image: -webkit-gradient(linear, 0 0, 100% 100%,
           color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
           color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
           color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
           to(transparent)); */
           /* background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
           transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
           transparent 75%, transparent);
           background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
           transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
           transparent 75%, transparent); */
           background-image: linear-gradient(-45deg, rgba(255, 255, 255, .9) 25%, transparent 25%,
           transparent 50%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .9) 75%,
           transparent 75%, transparent);
           }


       </style>
   </head>
   <body>

       <div class="angled-135 stripes"></div>
   </body>
</html>

LinDaiuuj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
斜杠css背景图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .stripes { ...
复制链接

扫一扫