Question

所以我有一个方形div，我试图让背景基本上看起来像这样：

我已经浏览了一下，因为这个问题已经被问了很多，我已经看过使用CSS渐变。

我一直在玩，并最终得到：

background-image: linear-gradient(
  180deg, rgba(255, 255, 255, .2) 29%,
  transparent 20%,
  transparent 51%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent);

但是，渐变似乎会将颜色从一个颜色混合到另一个颜色，而不是像下面那样产生明显的差异。

我应该做些什么来实现这个目标？

Answer 1

试试这个：

div#stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);
  background-size: 50px 50px;
}

<div id="stripes">

</div>

jsfiddle

Answer 2

你可以这样做：

public class ConsoleProgram
{

    private static SampleProgram _service = new SampleProgram("https://mytesturl.com/");
    static void Main(string[] args)
    {
        Console.WriteLine("");
        Console.WriteLine("1" = GetVisionTruckType Method");
        Console.WriteLine("");
        Console.WriteLine("Select the number that correlates to the Method that you want to execute: ");

        string methodNumber = string.Empty;
        while (methodNumber == string.Empty)
        {

            methodNumber = Console.ReadLine();
            if (!(methodNumber == "1"))
            {
                methodNumber = string.Empty;
                Console.WriteLine("Invalid input.");
                Console.WriteLine("Select the number that correlates to the Method that you want to execute: ");
            }
            switch (methodNumber)
            {

                case "1":
                    Console.WriteLine("Please enter a valid order item number: ");
                    string num = Console.ReadLine();
                    var type = _service.GetVisionTruckType(num);
                    Console.WriteLine(type.ToString());
                    break;

            }
            Console.Read();
        }
    }
 }

Jsfiddle

Answer 3

这里有一个更灵活，更优雅的解决方案：https://css-tricks.com/stripes-css/

＆＃13;

#stripes {
  height: 200px;
  width: 2000px;
  background-color:yellow;
}

.stripes {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #000 10px,
      #000 20px
  );
}

＆＃13;

<div id="stripes" class="stripes"></div>

＆＃13;

https://jsfiddle.net/ns8rn7r3/4/

Answer 4

请使用此CSS：

body{
  background: linear-gradient(45deg, white 25%, #000 25%, #000 50%, white 50%, white 75%, #000 75%);
  background-size:98px 98.9px;
}

见action here

div上的CSS背景条纹

4 个答案: