Question

所以，我有一个带有标题div的index.html文件，然后在标题div下面有一个容器div，它有另一个名为images的子div。我试图用css放置背景颜色或图像，但似乎出现了问题。我无法找出它是什么。

以下是HTML

<div class="container"> <!-- Start of the Container -->
<div class="images">
<img src="images/quotes/photo1.jpg" id="first_image">
<img src="images/quotes/photo2.jpg">
<img src="images/quotes/photo3.jpg">
<img src="images/quotes/photo4.jpg" id="first_image">
<img src="images/quotes/photo5.jpg">
<img src="images/quotes/photo3.jpg">
<img src="images/quotes/photo4.jpg" id="first_image">
<img src="images/quotes/photo5.jpg">
<img src="images/quotes/photo3.jpg">
</div> 
</div> <!-- End of the Container -->

以下是CSS

 .container{
  width:100%;
  height:auto;
  background:url("images/background.jpg");
  background-size:cover;
  background-size:contain;
  }

Answer 1

首先，您的ID应该是唯一的。因此，请将您的HTML更改为：

    <div class="container">
        <!-- Start of the Container -->
        <div class="images">
            <img src="images/quotes/photo1.jpg" id="first_image">
            <img src="images/quotes/photo2.jpg">
            <img src="images/quotes/photo3.jpg">
            <img src="images/quotes/photo4.jpg" id="second_image">
            <img src="images/quotes/photo5.jpg">
            <img src="images/quotes/photo3.jpg">
            <img src="images/quotes/photo4.jpg" id="third_image">
            <img src="images/quotes/photo5.jpg">
            <img src="images/quotes/photo3.jpg">
        </div>
</div>

其次，如果你想分组＆＃39;他们使用类代替如下：

<div class="container">
        <!-- Start of the Container -->
        <div class="images">
            <img src="images/quotes/photo1.jpg" class="imgGrp" id="first_image">
            <img src="images/quotes/photo2.jpg">
            <img src="images/quotes/photo3.jpg">
            <img src="images/quotes/photo4.jpg" class="imgGrp" id="second_image">
            <img src="images/quotes/photo5.jpg">
            <img src="images/quotes/photo3.jpg">
            <img src="images/quotes/photo4.jpg" class="imgGrp" id="third_image">
            <img src="images/quotes/photo5.jpg">
            <img src="images/quotes/photo3.jpg">
        </div>
</div>

第三，使用相对寻址来引用background CSS中的图像。如果您正确使用它，这应该如下所示

.container {
     width:100%;
     height:auto;
     background:url("http://i.stack.imgur.com/SZHzX.jpg");
     background-size:cover;
     background-size:contain;
  }

注意：另请注意，您可以通过使用background速记属性将CSS背景属性合并到单个语句中。背景速记属性由八个其他属性组成：

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

因此，速记属性可以写成：

background : <background-image> <background-position> <background-size> <background-repeat> <background-attachment> <background-origin> <background-clip> <background-color>

您可以根据需要有效修改以下CSS类（图片网址）。但是，这只是为了展示一个大致的想法：

.container {
    width:100%;
    height:auto;
    background: url('http://gillespaquette.ca/images/stack-icon.png') top center no-repeat orange;
  height : 400px;
}

请在下面的代码段中查看此操作：

＆＃13;

.container {
    width:100%;
    height:auto;
    background: url('http://gillespaquette.ca/images/stack-icon.png') top center no-repeat orange;
  height : 400px;
}

＆＃13;

<div class="container">
            <!-- Start of the Container -->
            <div class="images">
                <img src="images/quotes/photo1.jpg" class="imgGrp" id="first_image">
                <img src="images/quotes/photo2.jpg">
                <img src="images/quotes/photo3.jpg">
                <img src="images/quotes/photo4.jpg" class="imgGrp" id="second_image">
                <img src="images/quotes/photo5.jpg">
                <img src="images/quotes/photo3.jpg">
                <img src="images/quotes/photo4.jpg" class="imgGrp" id="third_image">
                <img src="images/quotes/photo5.jpg">
                <img src="images/quotes/photo3.jpg">
            </div>
    </div>

＆＃13;

背景颜色或图像不显示。 HTML和CSS

1 个答案: