Question

我一直试图通过将图像转换到我网站的背景来设置外部容器的背景图像。但没有任何显示，css中是否有某些东西可以让我显示背景图像？

笔：https://codepen.io/chriskaram/pen/BwVXGq 页面：https://mydietgoal.com/mydietgoal-features-and-plans/

<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content;">

  <div class="container container1">
        <div class="w-table">
        <div class="w-table-cell">
          <div class="w-container">
            <div class="w-card color-green">

                        <div class="card-header">
                <div class="w-title" style="cursor:default">
                  <h2><font size="7px">Novice</font></h2>
                </div>
                <div class="w-price" style="cursor:default">
                  $4.99
                  <h3>/ Week</h3>
                </div>
                <div class="container-button">
                  <a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
                </div>
              </div>

              <div class="card-content" style="cursor:default">
                <div class="w-item" style="cursor:default">
                  <span>Weekly </span>Meal Plans
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Personal </span>Dietary Assessment and Advice
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
  </div>

    <div class="container container2">
        <div class="w-table">
        <div class="w-table-cell">
          <div class="w-container">
            <div class="w-card color-blue">

              <div class="card-header">
                <div class="w-title" style="cursor:default">
                  <h2><font size="7px">Novice</font></h2>
                </div>
                <div class="w-price" style="cursor:default">
                  $9.99
                  <h3>/ Week</h3>
                </div>
                <div class="container-button">
                  <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                </div>
              </div>

              <div class="card-content" style="cursor:default">
                <div class="w-item" style="cursor:default">
                  <span>Weekly </span>Meal Plans
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Personal </span>Dietary Assessment and Advice
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container container3">
        <div class="w-table">
            <div class="w-table-cell">
          <div class="w-container">
            <div class="w-card color-orange">

              <div class="card-header">
                <div class="w-title" style="cursor:default">
                  <h2><font size="7px">Novice</font></h2>
                </div>
                <div class="w-price" style="cursor:default">
                  $4.99
                  <h3>/ Week</h3>
                </div>
                <div class="container-button">
                  <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                </div>
              </div>

              <div class="card-content" style="cursor:default">
                <div class="w-item" style="cursor:default">
                  <span>Weekly </span>Meal Plans
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Personal </span>Dietary Assessment and Advice
                </div>
                <div class="w-item" style="cursor:default">
                  <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                </div>
              </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Answer 1

这段代码

#btn1:hover + .outer-container {
    background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

表示当#btn为:hover时，next direct sibling .outer-container获得background-image。

然而，根据你的代码，.outer-container是#btn的盛大盛大祖父祖父母。所以它不会起作用。

坏消息是，CSS无法选择祖先。

所以我建议你用JavaScript来做。

Working Example

Answer 2

CSS只允许后代和兄弟选择器，它不支持将样式应用于父级。 scanf_s

为了达到这个效果，你需要一个与按钮位于同一级别的div，其中悬停触发器是定位的，固定的或绝对的（你需要改变你的标记以支持绝对）

以下是一个例子：

.bg,
.bg2 {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
}

#btn1:hover + .bg,
.bg2 {
  background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: opacity 0.5s;
}

.bg2 {
  opacity: 0;
}

#btn2:hover ~ .bg2 {
  opacity: 1;
}

我还为第二个按钮添加了不透明度变换，因为我觉得它不那么刺耳。

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

在悬停按钮Css时在页面上显示背景图像

2 个答案: