Question

我正在开发的网站使用引导框架。随之而来的问题是，我有一个容器div，该容器的div外部和左侧都应具有所选图像背景的背景图像。以下是我打算做的例子。有人可以帮我吗？谢谢。

HTML / PHP

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="container fundo" id="fadein1">
  <br>
  <br>
  <a href="admin_bairro_adicionar.php" class="btn btn-success">Nova Publicação</a>
  <br>
  <br>
  <p class="titulo_grande">Bairro Mineiro</p>
  <div class="row">
    <?php
            $select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;");	//sql select query
            $select_stmt->execute();
            while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
            {
            ?>
      <div class="col-sm-12">
        <a class="linha_paginas"></a>
        <br>
        <br>
        <div id="titulo_titulo">
          <?php echo $row['titulo'];?>
        </div>
        <br>
      </div>
      <div class="col-sm-4">
        <a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
      </div>
      <div class="col-sm-8">
        <div id="texto_texto">
          <?php echo $row['texto'];?>
        </div>
      </div>
      <div class="col-sm-6" align="right"><a href="admin_bairro_editar.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning">Editar</a></div>
      <div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger">Eliminar</a></div>
      <?php
            }
        ?>
        <br>
        <br>

  </div>
</div>

Answer 1

在这种情况下，您必须将您的Fundo容器放入另一个容器流体中，所以：

   <div class="container-fluid back-img">
    <div class="container fundo" id="fadein1">
        <br>
        <br>
        <a href="admin_bairro_adicionar.php" class="btn btn-success">Nova Publicação</a>
        <br>
        <br>
        <p class="titulo_grande">Bairro Mineiro</p>
        <div class="row">
        <?php
            $select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;");    //sql select query
            $select_stmt->execute();
            while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
            {
            ?>
            <div class="col-sm-12">
                <a class="linha_paginas"></a>
                <br>
                <br>
                <div id="titulo_titulo"><?php echo $row['titulo'];?></div>
                <br>
            </div>
            <div class="col-sm-4">
                <a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
            </div>
            <div class="col-sm-8">
                <div id="texto_texto"><?php echo $row['texto'];?></div>
            </div>
            <div class="col-sm-6" align="right"><a href="admin_bairro_editar.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning" >Editar</a></div>
            <div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger" >Eliminar</a></div>
        <?php
            }
        ?>
        <br>
        <br>

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

现在在CSS上，您将一个背景img添加到我给类名back-img的容器流体div中，并使用以下代码：

.back-img{
background-img: url("your url");
}

您也可以使用body来代替，但是如果您不想在整个页面上使用背景图片，最好使用div。希望对您有帮助

更新：如果您只想在每侧制作背景图像，则应将容器更改为容器流体，并添加3个这样的列：

<div class="col-sm-2 background-left"> </div>
<div class="col-sm-8 center"> // your mane block should be here(buttons and all your elements </div>
<div class="col-sm-2 background-right"> </div>

现在您添加CSS代码

.background-left{
background-img: url("your url");
}

.background-right{
background-img: url("your url");
}

祝你好运。

Answer 2

好吧，您可以通过在容器周围包装另一个DIV并将背景应用于该文档来代替。

<div class=“body-bg”>
     <div class=“container”>
            ....
     </div>
</div>

现在，在CSS中，您可以这样编写：

.body-bg {
     background: url(‘path-to-your-image.jpg’);
     width: 100vw; /* you shouldn’t need this as DIVs usually take width or parent container, anyway */ 
}

CSS如何使div容器在div的左侧和右侧显示背景图像？

2 个答案: