CSS和固定背景不起作用

我的图像具有950像素的高度。我希望它能够像雪貂一样移动。

如果我添加此属性“背景附件：固定;”，它的工作原理，但图像缩放，我不想:(

你能帮我呢？是小提琴：

body { 
 
    background: #f2f2f2; 
 
    font-family: Open Sans, Helvetica, Arial, Tahoma, Sans-Serif 
 
} 
 

 
/* -------------------------------------------------- 
 
/* Text-transform 
 
/* -------------------------------------------------- 
 
*/ 
 
.content-image-left-right { 
 
    background-color: #fff 
 
} 
 

 
.content-image-left-right h2 { 
 
    margin-top: 3rem; 
 
    margin-bottom: 3rem; 
 
    font-weight: bold; 
 
    letter-spacing: .4rem; 
 
    text-align: center; 
 
    text-transform: uppercase 
 
} 
 

 
.content-image-left-right p { 
 
    max-width: 450px; 
 
    color: #605e5e; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: justify 
 
} 
 

 
.content-image-left-right .cover { 
 
    height: 550px; 
 
    background-image: url(https://img11.hostingpics.net/pics/422842background3.png); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
     <div class='content-image-left-right'> 
 
      <div class="row"> 
 
       <div class="col"> 
 
        <h2> 
 
         Gérer 
 
        </h2> 
 
        <p> 
 
         Grâce à notre solution <strong>complète et assistée</strong>, Dometech vous permet <strong>une gestion simple et centralisée de tous vos biens</strong>. 
 
        </p> 
 
       </div> 
 
       <div class="col cover background-3"> 
 

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

来源

2017-09-07 Gaylord.P

替换提供工作小提琴 –

是@DavidHope .. –

卸下高度财产从CSS这将工作正常 –

body { 
 
    background: #f2f2f2; 
 
    font-family: Open Sans, Helvetica, Arial, Tahoma, Sans-Serif 
 
} 
 

 
/* -------------------------------------------------- 
 
/* Text-transform 
 
/* -------------------------------------------------- 
 
*/ 
 
.content-image-left-right { 
 
    background-color: #fff 
 
} 
 

 
.content-image-left-right h2 { 
 
    margin-top: 3rem; 
 
    margin-bottom: 3rem; 
 
    font-weight: bold; 
 
    letter-spacing: .4rem; 
 
    text-align: center; 
 
    text-transform: uppercase 
 
} 
 

 
.content-image-left-right p { 
 
    max-width: 450px; 
 
    color: #605e5e; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: justify 
 
} 
 

 
.content-image-left-right .cover { 
 
    height: 550px; 
 
    background-image: url(https://img11.hostingpics.net/pics/422842background3.png); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 550px 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
     <div class='content-image-left-right'> 
 
      <div class="row"> 
 
       <div class="col"> 
 
        <h2> 
 
         Gérer 
 
        </h2> 
 
        <p> 
 
         Grâce à notre solution <strong>complète et assistée</strong>, Dometech vous permet <strong>une gestion simple et centralisée de tous vos biens</strong>. 
 
        </p> 
 
       </div> 
 
       <div class="col cover background-3"> 
 

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

来源

2017-09-07 08:27:12

它不工作在我的情况：/我张贴小提琴:) –

你需要改变backgound-size: cover，并用图像background-size的大小例如background-size: 550px 300px其中第一值是宽度第二高度

来源

2017-09-07 10:34:06

CSS和固定背景不起作用

回答

相关问题