Codepen

Question

我正在尝试在我的网站上启动并运行一个部分。我想添加背景图片而不是颜色。我试过在这里阅读和其他网站，我尝试的任何东西似乎都工作。我正在使用此部分代码：

!* {
box-sizing: border-box; 
}

ebody {
margin: 0; 
font-weight: 500;
font-family: 'HelveticaNeue';
}

esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;

background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;

&:nth-of-type(2n) {
background-color: #D55B79;
}
}

.eintro {
 height: 90vh;
 }

 .econtent {
  display: table-cell;
  vertical-align: middle;
  }

  eh1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
  }

  ep {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;
  }

  ea {
  font-weight: 700;
  color: #373B44;
  position: relative;

  e&:hover{ 
  opacity: 0.8;
  }

  e&:active {
  top: 1px;
  }
  }

  efooter {
  padding: 1% 5%;
  text-align:center;
  background-color: #373B44;
  color: white;

  ea {
  color: #FE4B74;
  font-weight: 500;
  text-decoration: none;
  }
  }

我已将此添加到代码中：

 section {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: 100%;

    background-image: url('https://s15.banner_test.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;

目标是添加左对齐或右对齐的图像，然后向该部分添加一些文本。我的目标是左图像，然后下一个框是右图像，依此类推。我已经看到了对其他网站的影响，如果做得正确，它看起来不错。

Answer 1

为了将背景图片添加到任何html元素，您需要在css中添加以下行：

background-image: url("pathtoimage");

在你的css代码中有：

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
  }
  section:nth-of-type(2n) {
    background-color: #FE4B74;
  }

这里的代码将获取所有部分html标签，并将样式应用于它们。

在这里你甚至可以注意到第一个背景颜色：＃373B44;适用于所有部分和第二个背景颜色：＃FE4B74;仅适用于2n

的部分

例如：

（页面中的第1部分html元素）第1部分将是颜色＃373B44 （页面中的第2部分html元素）第2部分将是颜色＃FE4B74 （页面中的第3部分html元素）第3部分将是颜色＃373B44 （页面中的第4部分html元素）第4部分将是颜色＃FE4B74 等等

现在为了添加背景图片，我们所要做的就是以这种方式将上面提供的代码添加到您的部分

    section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;

      /*added here*/
      background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
       /*added here*/ }

      section:nth-of-type(2n) {
        background-color: #FE4B74;
      }

但是，现在你有两个问题： 1-所有部分中的相同背景图像（无交替） 2-图像可能太小，不适合或可能以不好看的方式重复

所以为了解决问题1，你所要做的就是背景颜色所发生的事情。所以我们只需在2n下添加另一个背景图像：

 section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;
        background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}

      section:nth-of-type(2n) {
        background-color: #FE4B74;
        /*this will overwrite the other background image for your 2n sections*/
        background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
      }

为了解决第二个问题，您可能需要使用以下内容：

  background-repeat:no-repeat; /*removes repetition*/
  background-size:cover; /*allows picture to take up whole section space*/

，最终代码将如下所示

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
    background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
    background-repeat:no-repeat;
  background-size:cover;}

  section:nth-of-type(2n) {
    background-color: #FE4B74;
    background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
  }

为了更好地理解CSS中的背景属性，我建议进入以下链接： https://www.w3schools.com/css/css_background.asp

此链接将帮助您理解以下部分：nth-of-type（2n） https://www.w3schools.com/cssref/sel_nth-of-type.asp

codepen链接 https://codepen.io/sara-kat/pen/gKrVpg

度过美好的一天

Answer 2

实际上有一个非常简单的解决方案。图像的链接不起作用。你不必改变其他任何事情。

我为你的第二部分提供了课程bg，并将你的代码设置为CSS中该部分的样式。如果您使用工作链接，它会起作用：

Codepen

section.bg {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: 100%;

    background-image: url('//unsplash.it/1200/800');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

如何将背景图像添加到CSS

2 个答案:

Codepen