使视差图像更小，并适合特定的地方

Question

我正在尝试创建一个视差并将我的图像放入一个可以调整实际图像大小的容器中。我试着用2张图片更好地解释： 这是它看起来如何知道

以下是我希望它看起来像：

我希望图像缩小一点并看到更多图像; 以下是我的代码：

<div class="col-lg-6 services-container">
    <section class="parallax img-responsive" style="background: url('<%= serv.imagePath %>')">
    </section>
</div>

和CSS

.services-container {
    border-bottom: 1px solid #e4e3e3;
    height: 300px;
}

.parallax {
     /* Set a specific height */
    min-height: 300px;


    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

您必须查看＆＃34; CSS特性层次结构＆＃34; （https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/）。您在section标签中使用内联样式的背景简写。这将覆盖css中存在的所有背景样式。所以只需用background-image替换背景。这应该可以解决问题：

available()

Answer 2

您好我找到了解决方案：

background-size: 50%;
background-position-x: right;
background-position-y: center;

这将把我的图像放在屏幕的所需部分。