斜杠css背景图

阳光穿透心脏的1/2处 2023-07-11 05:45 10阅读 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>