Question

用Google搜索，但大多数主题都是关于视差效果，包括全宽和/或高度 - 例如对于标题。我想要的是this。如果你看看＆＃34;我们擅长＆＃34;在左栏中，有一个视差效果。我查看了他们的代码，但我无法理解他们在那里所做的事情，所以我认为只需使用flexbox即可。

现在，我设法使用flexbox和background-attachment: fixed;进行视差效果，但图像看起来很奇怪;它会放大并且不能正确居中。这是它的样子：

以下是它的样子：

这是代码的一部分：

HTML：

<section class="section-skills">
  <div class="item pri"></div>

CSS：

.section-skills{
    display:flex;
    padding-top: 40px
}

.item{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pri{
    background-image: url(img/skills-007.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 567px;
    width: 100%;
}

这是CodePen：http://codepen.io/anon/pen/VPVmLb

我有什么遗失的东西吗？或者我不应该使用flexbox进行视差？

Answer 1

revised codepen

＆＃13;

public boolean doesRegionExist(int analystId, List<Integer> regionIds) {
    MapSqlParameterSource params = new MapSqlParameterSource();
    params.addValue("analystId", analystId);
    params.addValue("regionIds", regionIds);

    Integer result = jdbcTemplate.queryForObject("SELECT COUNT(*) FROM USER_REGION_TABLE WHERE STATUS = 1 AND USER_ID = :analystId AND REGION_ID IN (:regionIds)", params, Integer.class);

    return result != null && result > 0;
}

＆＃13;

.section-skills {
  display: flex;
  padding-top: 40px;
}
.item {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pri {
  background-image: url(http://placehold.it/800x600);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 567px;
  width: 100%;
}
.sec {
  background: #f7f7f7;
  align-items: flex-start;
}
.skills-box {
  width: 85%;
  margin-top: 90px;
  padding-left: 10%;
}
.skills-box .sub-text:after {
  margin-left: 0;
  margin-top: 30px;
}
.skills-box h2,
.skills-box .sub-text {
  text-align: left;
}
.skills-box .sub-text {
  margin-left: 0;
  width: 80%;
}
.sec h3 {
  font-weight: 400;
  font-size: 130%;
}
/* Skill Bars */

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 25px;
  width: 100%;
  background: #eee;
  height: 45px;
  border-radius: 3px;
  transition: 0.4s linear;
  transition-property: width, background-color;
}
.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  background: #6adcfa;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-bar {
  height: 45px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
}
.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
}

＆＃13;

在flexbox列上产生视差效果

1 个答案: