Question

我有2个背景图片，其中一个是徽标和横幅图片。我需要对第二张图片应用线性渐变，以便我可以对其模糊处理以清楚地看到上面的文本，但横幅图片无法正确显示。

下面是我的代码

<!DOCTYPE html>
<html>
<body>
<style>
.banner{
	background-image: url('https://diylogodesigns.com/wp-content/uploads/2016/05/Pizza-Hut-Logo-PNG-Transparent-Background.png'), linear-gradient(rgba(84, 84, 84,0.7), rgba(84, 84, 84,0.7)), url('https://albicja.pl/wp-content/uploads/2017/02/berlin.jpg');
    background-size: cover, cover;
    background-position: left top, center;
    color: white;
    padding: 70px 0;
    background-size: 80px auto, auto;
    background-repeat: no-repeat;
}

.container {
	width: 800px;
    margin: 0 auto;
    text-align: center;
}

.letterSpacing {
	letter-spacing: 12px;
}

@media(max-width: 992px) {
	.container {
		width: 600px;
	}
}

@media(max-width: 768px) {
	.container {
		width: 500px;
	}
}

@media(max-width: 480px) {
	.container {
		width: 400px;
	}
}
</style>

<div class="banner">
	<div class="container">
    	<h2 class="letterSpacing">Standard Lorem Ipsum passage</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

<div class="container">
	<h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    
    <h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

</body>
</html>

请纠正我哪里错了！

Answer 1

如果我是对的！..

 .banner{
    background-image: url('https://diylogodesigns.com/wp-content/uploads/2016/05/Pizza-Hut-Logo-PNG-Transparent-Background.png'), linear-gradient(rgba(84, 84, 84,0.7), rgba(84, 84, 84,0.7)), url('https://albicja.pl/wp-content/uploads/2017/02/berlin.jpg');
    background-size: cover, cover;
    background-position: left top, center;
    color: white;
    padding: 70px 0;
    background-size: 80px auto, auto;
    background-repeat: no-repeat;
}

您的横幅图像看上去较小，这是因为您两次声明了背景尺寸，而第二次您声明其采用了 80px 。如果您删除该图像将覆盖整个空间。

您可以在这里codepen link to your code

为便于参考，将代码粘贴到此处。

    <style>
.banner{
    background: url('https://diylogodesigns.com/wp-content/uploads/2016/05/Pizza-Hut-Logo-PNG-Transparent-Background.png'), linear-gradient(rgba(84, 84, 84,0.89), rgba(84, 84, 84,0.89)), url('https://albicja.pl/wp-content/uploads/2017/02/berlin.jpg');
    background-size: 10%, cover, cover ;
    background-position: center, center, center;
    color: white;
    padding: 70px 0;
/*     background-size: 80px auto, auto; */
    background-repeat: no-repeat;
}

.container {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}

.letterSpacing {
    letter-spacing: 12px;
}

@media(max-width: 992px) {
    .container {
        width: 600px;
    }
}

@media(max-width: 768px) {
    .container {
        width: 500px;
    }
}

@media(max-width: 480px) {
    .container {
        width: 400px;
    }
}
</style>
<div class="banner">
    <div class="container">
        <h2 class="letterSpacing">Standard Lorem Ipsum passage</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

<div class="container">
    <h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    <h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

Answer 2

我认为这就是您要寻找的。此外，分隔背景位置值时，请勿使用逗号。就像您不说margin:0px,0px,0px,0px;，您也不说background-position: left top, center;

.banner {
   background:  url('https://albicja.pl/wp-content/uploads/2017/02/berlin.jpg'), linear-gradient(rgba(84,84,84,0.9) 40%, rgba(84,84,84,0.8) 80%), url('https://albicja.pl/wp-content/uploads/2017/02/berlin.jpg');
   background-size: cover;
   background-repeat:no-repeat;
   background-position: left top; /* specify 2 or 4 sides either (up/down, left/right) or (up, left, bottom, right)*/
   color: white;
   padding: 70px 0px;
}

如何添加多个具有线性渐变的背景图像？

2 个答案: