Question

我正在尝试使用背景在div中创建网格。当然，background-size属性是一种创建网格的好方法，其中10％的大小将在div中创建10个均匀间隔的单元格，例如：

div{
 width:200px;
 border:solid 1px black;
 background-size: 10% 1px;
 background-image: linear-gradient(to left, gray 1px,  transparent 1px);
}

<div>x</div>

但是，我还需要将box-sizing设置为“border-box”，否则该框占用的像素数超过width属性指定的像素数。这会导致Chrome中出现各种各样的破坏，背景大小按百分比规格，例如：

div{background-color:white;}
#d1 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
    box-sizing:border-box;
}
#d2 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
}

<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>

请注意，顶部div（d1）中显示的单元格数超过10个，尽管每个单元格应该是div宽度的10％。

这似乎只是Chrome问题，但如果有人有解决方案，请告诉我。

Answer 1

我承认我以前从未玩过这个东西，但看起来你需要考虑inner2.start()的{{1}}宽度。现在不要问我原因，但它确实有效。用不同的百分比和宽度测试它。如果您需要 为什么 ，不仅如何，您还需要深入了解W3C＆＃ 39;自己的文档或等待更好的文档答案。

＆＃13;

1px

＆＃13;

background-image

＆＃13;

干杯！

Answer 2

检查进度条形码。它是如何工作的？

＆＃13;

override func viewDidLoad() {
    super.viewDidLoad()

    NotificationCenter.default.addObserver(self, 
    selector: #selector(applicationDidEnterBackground), 
    name: NSNotification.Name.UIApplicationDidEnterBackground, 
    object: nil)    
}

deinit {
    NotificationCenter.default.removeObserver(self)
}

func applicationDidEnterBackground() {
    //do something here
    print("animal: \(animal)")
}

＆＃13;

.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}

＆＃13;

<div class="progress-bar"></div>表示框的background-size: 40px 40px;宽度和40px宽度。 两个40px如何更加强硬？ width首先图片然后放置间隙。背景图片将开始background-size，然后放置0 to 40px间隙，然后40px图片。在完整40px完成之前，它是无限的。使用width 宽度图片，查看您的第一个代码段background-size: 10% 1px;浏览器从总width呈现 10个差距。

注意： 1px在设置background-size时有效。否则background-image属性将无效。

希望得到这个帮助。

Answer 3

Andrei Gheorghiu的回答非常好，但在所有浏览器中并不一致，并且对于某些分隔符位置只有几个像素。无论如何，这是更一致的答案，似乎无处不在：

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>

当box-sizing是border-box时，background-size按百分比

3 个答案: