Question

我想创建一个主页，该主页具有居中的背景图像，图像周围有30px填充。简单但不可能实现。

import org.apache.hadoop.fs.Path;
import org.apache.hadoop.io.DoubleWritable;
import org.apache.hadoop.io.IntWritable;
import org.apache.hadoop.io.Text;
import org.apache.hadoop.mapreduce.Job;
import org.apache.hadoop.mapreduce.lib.input.FileInputFormat;
import org.apache.hadoop.mapreduce.lib.output.FileOutputFormat;
import org.apache.hadoop.conf.Configuration;

public class SentimentDriver {

  public static void main(String[] args) throws Exception {

    /*
     * Validate that two arguments were passed from the command line.
     */
    if (args.length != 2) {
      System.out.printf("Usage: StubDriver <input dir> <output dir>\n");
      System.exit(-1);
    }

    /*
     * Instantiate a Job object for your job's configuration. 
     */
    Configuration conf = new Configuration();
    Job job = Job.getInstance(conf, "job_13");

    /*
     * Specify an easily-decipherable name for the job.
     * This job name will appear in reports and logs.
     */
    job.setJobName("job_13");

    job.setJarByClass(SentimentDriver.class);
    job.setMapperClass(SentimentMapper.class);
    job.setCombinerClass(SentimentReducer.class);
    job.setReducerClass(SentimentReducer.class);
    job.setOutputKeyClass(Text.class);
    job.setOutputValueClass(Text.class);
    FileInputFormat.addInputPath(job, new Path(args[0]));
    FileOutputFormat.setOutputPath(job, new Path(args[1]));

    /*
     * Start the MapReduce job and wait for it to finish.
     * If it finishes successfully, return 0. If not, return 1.
     */
    boolean success = job.waitForCompletion(true);
    System.exit(success ? 0 : 1);
  }
}

https://jsfiddle.net/geike/okyg5p2o/

Answer 1

使用border：

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background: #333 url("http://www.descoperalocuri.ro/wp-content/uploads/2013/11/Riga-o-imagine-clasic%C4%83-pentru-centrul-vechi-1024x575.jpg") no-repeat 50% 50% /cover;
  min-height: calc(100vh - 60px);
  border: 30px solid #333;
}

＆＃13;

<div class="wrapper"></div>

＆＃13;

使用填充

＆＃13;

body {
  margin: 0;
  padding: 30px;
  background-color: #333;
}

.wrapper {
  background: url("http://www.descoperalocuri.ro/wp-content/uploads/2013/11/Riga-o-imagine-clasic%C4%83-pentru-centrul-vechi-1024x575.jpg") no-repeat 50% 50% /cover;
  min-height: calc(100vh - 60px);
}

＆＃13;

<div class="wrapper"></div>

＆＃13;

使用保证金：

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #333;
}

.wrapper {
  margin: 30px;
  background: url("http://www.descoperalocuri.ro/wp-content/uploads/2013/11/Riga-o-imagine-clasic%C4%83-pentru-centrul-vechi-1024x575.jpg") no-repeat 50% 50% /cover;
  min-height: calc(100vh - 60px);
}

＆＃13;

<div class="wrapper"></div>

＆＃13;

我建议的解决方案（没有包装）：

＆＃13;

body {
  padding: 30px;
  margin: 0;
  background: url("http://www.descoperalocuri.ro/wp-content/uploads/2013/11/Riga-o-imagine-clasic%C4%83-pentru-centrul-vechi-1024x575.jpg") no-repeat 50% 50% /cover;
  background-clip: content-box;
  box-sizing: border-box;
  /* min-height: calc(100vh - 60px); */
  min-height: 200vh; /* this is here to see page scrolling. remove and uncomment previous line */
}
body::before {
  position: fixed;
  z-index: 1;
  display: block;
  content: '';
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  border: 30px solid #333;
  box-sizing: border-box;
}

＆＃13;

我在最后一个视图中将视图高度设置为视口高度的两倍，以显示当内容在视图上方延伸时会发生什么。

Answer 2

您只需要为megawrapper设置背景属性：

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.megawrapper {
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    background-image: url('http://lorempixel.com/output/nightlife-q-c-640-480-9.jpg');
    background-repeat: no-repeat;
    background-position: 30px 30px;
    background-size: calc(100% - 60px);
}
.home-page {
    padding: 60px;
    background-color: gray;
}

＆＃13;

    <div class="megawrapper">
      <div class="home-page"> 
      </div>
    </div>

＆＃13;

居中的主页div与背景图片

2 个答案: