Question

我的背景图片有问题。我的背景图像具有全宽，但没有响应。在我的代码中，我使用的是Bootstrap。我希望这不是问题。

在991像素的情况下，无论是否有媒体查询，图片都会消失。此外，使图像全宽的唯一选项是背景大小的封面。

当我使用100％的宽度（这会使它响应）并不真正起作用。然后图像分裂。 max-width:100%也是如此。我不知道为什么它不起作用。

我的代码：

body, html {
    padding:0px;
    margin:0px;
    font-family: 'TheSans Swisscom' !Important;
}
    
@media only screen and (min-width: 991px) {
    .col-md-3{
        width: calc(25% - 10px) !Important;
        margin-right:5px; 
        margin-left:5px;
        margin-top: 10px;
        background-color: white; 
        position:relative !Important; 
        font-family: TheSans Swisscom; 
        display: block;
        padding:0px !Important;
    }
}
    
a:link {
    color: black;
}    
    
a:visited {
    color: Black;
}    
    
.a {
    padding: 70px;
    position: relative;
    right: -5%;
}

a {
    color: black !important;
}

.center-block {
    width: 100%;
}

h2 {
    font-size:30px;
    margin: 0 0 auto;
    width: 9em;
    text-align: center;
}

.ptags {
    line-height: 1.2;
    padding: 5px;
}

.button {   
    margin-right: 10px;
    height: 45px;
    width: 45px;
    background-color: black;
    font-size: 60px;
    color: white;
    text-align: center;
    line-height: 45px;
    bottom: 10px;
    cursor: pointer;
    z-index: 1;
    font-family: TheSansSwisscom; 
    position: relative;
    right: -98%;
    top: -308px;
}

.ktm {
    text-align: center;
}

.h1{
    font-size: 36px;
    text-align: center;
}

h2 {
    font-size:30px;
    margin: 0 0 auto;
    width: 9em;
    text-align: center;
}

.img-center{
    display: block;
    margin:0 auto;
}

a:link {
    color: black;
}

.row{
    display:block;
}

@media only screen and (min-width: 991px){
    .img {
        background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.container{
    width: 100% !important;
    padding: 100px;
}

.cardContainer {
    width: 1200px;
    position: relative;
    margin-left: calc( 50% - 600px);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <section class="container img">   
        <h1 class="h1 a"><a name="Details">Details</a></h1>
        <div class="button">
            <p>+</p>
        </div>
        <div class="cardContainer">
            <div  class="col-md-3  col-xs-12">
                <img class="center-block"src="http://farm8.static.flickr.com/7411/8725728890_b056a881c5_m.jpg" alt="thirdimage">
                <h2 class="Details">Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div id=cardPrototype class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm2.static.flickr.com/1577/26053634152_9a7d5b3580_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm8.static.flickr.com/7250/7445511584_9079770764_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm9.static.flickr.com/8540/8668499106_36a8b6cab8_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
           </div>
       </div> 
   </section>

Answer 1

我不确定这是不是你想要的，但看看。

＆＃13;

.img {
  background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

.center-block{
  width:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container img">
  <h1 class="h1 a"><a name="Details">Details</a></h1>
  <div class="button">
    <p>+</p>
  </div>

  <div class="cardContainer">
    <div class="col-md-3  col-xs-12">
      <img class="center-block" src="http://placehold.it/220x150" alt="thirdimage">
      <h2 class="Details">Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div id=cardPrototype class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
  </div>
</section>

＆＃13;

但是你可能想要使用background-size：cover; with background-repeat：no-repeat;这将使其绝对响应

我修改了代码段

Answer 2

我从你的问题中可以理解，希望这可以解决你遇到的问题

 background-repeat: no-repeat;

响应背景图像

2 个答案: