Question

我一直在努力获取背景图片以填充页面的整个背景并且不透明。它只希望更改文本的不透明度。我知道我缺少一些简单的东西。我试图将其放在自己的类中不占优势。我想念什么？

Running in Durability level: MAX_SURVIVABILITY
org.codehaus.groovy.control.MultipleCompilationErrorsException: startup failed:
WorkflowScript: 5: unexpected token: node @ line 5, column 2.
    node {
    ^

1 error

    at org.codehaus.groovy.control.ErrorCollector.failIfErrors(ErrorCollector.java:310)
    at org.codehaus.groovy.control.ErrorCollector.addFatalError(ErrorCollector.java:150)
    at org.codehaus.groovy.control.ErrorCollector.addError(ErrorCollector.java:120)
    at org.codehaus.groovy.control.ErrorCollector.addError(ErrorCollector.java:132)
    at org.codehaus.groovy.control.SourceUnit.addError(SourceUnit.java:350)
    at org.codehaus.groovy.antlr.AntlrParserPlugin.transformCSTIntoAST(AntlrParserPlugin.java:144)
    at org.codehaus.groovy.antlr.AntlrParserPlugin.parseCST(AntlrParserPlugin.java:110)
    at org.codehaus.groovy.control.SourceUnit.parse(SourceUnit.java:234)
    at org.codehaus.groovy.control.CompilationUnit$1.call(CompilationUnit.java:168)
    at org.codehaus.groovy.control.CompilationUnit.applyToSourceUnits(CompilationUnit.java:943)
    at org.codehaus.groovy.control.CompilationUnit.doPhaseOperation(CompilationUnit.java:605)
    at org.codehaus.groovy.control.CompilationUnit.processPhaseOperations(CompilationUnit.java:581)
    at org.codehaus.groovy.control.CompilationUnit.compile(CompilationUnit.java:558)
    at groovy.lang.GroovyClassLoader.doParseClass(GroovyClassLoader.java:298)
    at groovy.lang.GroovyClassLoader.parseClass(GroovyClassLoader.java:268)
    at groovy.lang.GroovyShell.parseClass(GroovyShell.java:688)
    at groovy.lang.GroovyShell.parse(GroovyShell.java:700)
    at org.jenkinsci.plugins.workflow.cps.CpsGroovyShell.doParse(CpsGroovyShell.java:131)
    at org.jenkinsci.plugins.workflow.cps.CpsGroovyShell.reparse(CpsGroovyShell.java:125)
    at org.jenkinsci.plugins.workflow.cps.CpsFlowExecution.parseScript(CpsFlowExecution.java:560)
    at org.jenkinsci.plugins.workflow.cps.CpsFlowExecution.start(CpsFlowExecution.java:521)
    at org.jenkinsci.plugins.workflow.job.WorkflowRun.run(WorkflowRun.java:330)
    at hudson.model.ResourceController.execute(ResourceController.java:97)
    at hudson.model.Executor.run(Executor.java:429)

Answer 1

使用固定的伪元素（在这种情况下为::before）填充主体，并具有z-index: -1，因此它将出现在主体的内容下：

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url(https://picsum.photos/200/300) no-repeat center center fixed;
  background-size: cover;
  opacity: .7;
  content: '';
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec pharetra dui. Integer porttitor sit amet lacus non egestas. Donec ac posuere ex. Donec sed ex eu lorem pharetra condimentum id ut sem. Quisque sagittis molestie odio ultricies sodales. Nullam vulputate ultricies purus, ac sodales orci hendrerit quis. Proin eu purus et magna condimentum sollicitudin. Vestibulum nec nunc imperdiet, cursus turpis a, ultricies justo. Morbi cursus ullamcorper dolor, in semper ipsum faucibus at. Nulla et est non lectus tristique condimentum. Vivamus id diam et libero placerat placerat. Donec tincidunt, massa at porttitor pharetra, nulla ipsum dignissim nulla, eget accumsan neque nulla a erat. Phasellus vel lobortis ligula.</p>

<p>Nam dignissim vestibulum nibh, vel convallis ante porta eu. In ultrices velit ac mi fermentum, eget porttitor libero dictum. Vestibulum posuere odio tortor, ut scelerisque quam ullamcorper sed. Pellentesque eget libero diam. Mauris malesuada metus vel placerat tempus. Aenean feugiat sed metus vel posuere. Nunc interdum fermentum lacinia. Nunc lacinia aliquam magna, nec mattis tellus. Sed eleifend turpis eget sem ultrices, vehicula dictum ipsum egestas. Cras nisl lacus, congue quis rutrum sit amet, congue at justo. Integer sagittis ante quis ante ullamcorper consectetur. Proin non varius enim, a ornare nisi. Etiam euismod velit ac enim pellentesque aliquam. Donec aliquam finibus leo, ac cursus mi convallis eu.</p>

<p>Curabitur nec condimentum quam. Sed eget augue aliquet, pulvinar turpis cursus, rutrum tellus. Aenean accumsan placerat felis et tristique. Nam laoreet erat sit amet volutpat rhoncus. Duis sagittis egestas nulla ut luctus. Sed erat ipsum, egestas eu elementum eu, mattis eget quam. Aenean condimentum urna ac neque blandit congue. Ut malesuada, felis eu pretium bibendum, ante lectus mollis turpis, a consectetur lacus turpis ullamcorper nulla. Nam facilisis arcu lectus. Nulla sed faucibus turpis, sed facilisis augue. Nullam consequat euismod pretium. Fusce orci ligula, interdum sed ante at, hendrerit malesuada nibh.</p>

在CSS中添加不透明的背景图片

1 个答案: