Css背景：重复线性渐变的偏移

Question

我在SASS中以下列方式绘制了一个网格作为<div>的重复背景：

background-image:
  repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
  repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

它呈现以下方式：

但是我希望它向左移动15px（或向右移动4 * $minor-grid-size + 15px），即：

现在我无法使用margin-left，因为它也会偏移<div>标记内的元素，我不希望这样，see the Fiddle here（不要注意到JS）。

我只希望背景有偏移量。

Answer 1

您可以使用sliceData<-reactive({ sData<-my_data() %>% select(one_of(c(input$e1,input$e2,input$e3,input$e4,input$e5))) return(sData) }) vals <- reactiveValues( keeprows = rep(TRUE, nrow(sliceData())) ) IA_Plot<-reactive({ # Plot the kept and excluded points as two separate data sets keep <- sliceData()[ vals$keeprows, , drop = FALSE] exclude <- sliceData()[!vals$keeprows, , drop = FALSE] IAP<-ggplot(keep, aes(input$e3, input$e4)) + geom_point() + geom_smooth(method = lm, fullrange = TRUE, color = "black") + geom_point(data = exclude, shape = 21, fill = NA, color = "black", alpha = 0.25) + coord_cartesian(xlim = c(1.5, 5.5), ylim = c(5,35)) IAP }) # Create single graph plot for interaction ---- output$sPlot <- renderPlot({ IA_Plot() }) # Toggle points that are clicked ---- observeEvent(input$sPlot_click, { res <- nearPoints(sliceData(), input$sPlot_click, allRows = TRUE) vals$keeprows <- xor(vals$keeprows, res$selected_) }) # Toggle points that are brushed, when button is clicked ---- observeEvent(input$exclude_toggle, { res <- brushedPoints(sliceData(), input$sPlot_brush, allRows = TRUE) vals$keeprows <- xor(vals$keeprows, res$selected_) }) # Reset all points ---- observeEvent(input$exclude_reset, { vals$keeprows <- rep(TRUE, nrow(sliceData())) }) 属性。

background-position

Answer 2

我遇到负background-position的问题，导致重复模式的结尾被切断：

background-image: repeating-linear-gradient(90deg, red, red 200px, blue 200px, blue 400px);
background-position: -50px -50px;

我发现在repeating-linear-gradient中使用负偏移量可以解决此问题：

background-image: repeating-linear-gradient(90deg, red -50px, red 150px, blue 150px, blue 350px);