Question

我想知道是否可以在css或svg中生成对角线来覆盖div，这将允许div的背景颜色显示出来。如下所示。

如果有人有一个有用的例子。

enter image description here

Answer 1

您可以尝试：

HTML：

<div class="deg45 stripes">TEST</div>

CSS3：

.stripes {
    height: 250px;
    width: 375px;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
}
.deg45 {
    background-color: white;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, gray), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, gray), color-stop(.75, gray), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
}

FIDDLE

您可以根据需要对其进行自定义：

-45deg是您希望条纹具有的角度和gray它们的颜色。同样使用background-size，您可以定义它们的大小

Answer 2

您可以将base64数据用作png图像。例如：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIAKckTrzn5GQOpAik2cmjHgVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQD+Nia8BIDCEQAAAABJRU5ErkJggg==);

This is a good generator

An example of it at work

Answer 3

是的，我是在 btn 上做的。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 
     
  <button style=" background-size: 10px 10px; 
            background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
            height: 600%;"type="button" class="btn btn-default btn-lg">Large Default Button</button>

</div>

</body>
</html>

在CSS中生成对角线（条纹）

3 个答案: