Question

我想在同一张图片上有多个线性渐变或不透明度。

以下是我目前的情况：

HTML：

<body>
    <div class="container">
        <div class="inner-container">
            <div class="left-section"></div>
            <div class="right-section"></div>
        </div>
    </div>


</body>

CSS：

*{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #333;
        }
        .container{
            width: 1050px;
            height: 750px;
            background-image: 
                linear-gradient(
                      rgba(0, 0, 0, 0.5),
                      rgba(0, 0, 0, 0.5)
                        ),
                url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg)
            ;
            margin: 0 auto;
            -webkit-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
            margin-top: 50px;
        }
        .inner-container{
            width: 75%;
            height: 75%;
            border: 1px solid white;
            margin: 0 auto;
            margin-bottom: 50px;
            border-radius: 5px;
            background-image: 
                linear-gradient(
                      rgba(0, 0, 0, 0),
                      rgba(0, 0, 0, 0)
                        ),
                url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg);
        }

从CSS中，我在两个容器中调用相同的图像。但是这样做会使布局看起来很奇怪，因为外部和内部容器之间的图像不一致。如何使用相同的图像来实现图像中的效果？

Answer 1

将background-position: center top添加到容器和内部容器中，它们将对齐。

一个图像上有多个渐变

1 个答案: