同时在 HTML 和 CSS 规则中的 style 标签答案

【问题标题】：style tag in HTML and CSS rules at the same time同时在 HTML 和 CSS 规则中的 style 标签
【发布时间】：2019-10-19 13:32:34
【问题描述】：

这就是我得到的：image_get

这就是我想要的：image_want

我正在使用style 标记将图像设置为背景并分离 CSS 样式表以正确定位它们。我做一堆

        <div class="game" style="background: url('https://somewhere/somegame.jpg');">

在我的 index.html 中

和

        .game {
              background-position: top center;
              background-repeat: no-repeat;
              background-size: cover;
}

在我的 style.css 中

但未应用 styles.css 中的 CSS 规则。仅当我将所有内容从 styles.css 移动到 index.html 时，它才有效，反之亦然。有许多带有“游戏”类和不同图像的 div。

有没有办法通过在style 标签中设置背景并在样式表中进行所有调整等操作来获取image_want？

如果我包含它，它会起作用

        background: url('https://somewhere/somegame.jpg');

在我的 style.css 或

       background-position: top center; background-repeat: no-repeat; background-size: cover;

在样式标签中

整个代码 HTML：

<section id="top-games">
   <div class="container">
       <div class="games">
            <div class="game" style="
                    background: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">
       <div class="games">
            <div class="game" style="
                    background: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">...

CSS：

#top-games .games {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    padding-bottom: 20px;
}
#top-games .games .game {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 280px;
    border-radius: 5px;
    position: relative;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    overflow: hidden;
    cursor: pointer;
}

PS：对不起，我的英语可能不好

【问题讨论】：

你的预期输出是什么？
您的期望输出是什么，请清除您的图像等问题

标签： html css

【解决方案1】：

使用background-image 属性。

然后根据需要调整div的大小。

#top-games .games {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding-bottom: 20px;
}

#top-games .games .game {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 280px;
  border-radius: 5px;
  position: relative;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  cursor: pointer;
}

<section id="top-games">
  <div class="container">
    <div class="games">
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>

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

【讨论】：

哦，非常感谢！有效！没想到还有background-image属性）