Question

如何使.welcome-content-wrap类延伸以适应其内容并仍然保持我给它的透明风格？

据我所知，你通常不会像我一样添加背景图片，但我有理由这样做，就像我一样

.welcome-section{
	position: relative;
}

.welcome-background{
	max-width: 100%;
	display: block;
	height: auto;
}

.welcome-content-wrap{
	position: absolute;
	top:10%;
	left: 0;
	right: 0;
	bottom: 10%;
	margin: 0 auto;
	max-width: 800px;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
}

.welcome-content-wrap img{
	display: block;
	width: 50%;
	margin: 50px auto;
}

.welcome-content-wrap p{
	color: #fff;
	margin: 25px;
}

.text-style{
	font-family: outstanding;
	font-size: 0.75em;
}

<div class="welcome-section">
	<img class="welcome-background" src="images/menuBackground.jpg">
	<div class="welcome-content-wrap">
		<img src="images/welcomeTransparent.png">
	
		<p>
			<span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 
			Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day.
		</p>
		<p>All our fish is sourced from sustainable sources.</p>
		<p>
			We cook fish to order so that it isn't left to dry out under lights,<br> 
			like in too many chip shops.
		</p>
		<p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p>
	
		<img id="image-m" src="images/shutterstock_164403170.jpg">
		<img id="image-l" src="images/National-federation-of-fish-logo.png">
		<img id="image-r" src="images/CSSMSClogo.png">
	</div>
</div>

Answer 1

我不完全确定您对absolute定位的意图，但我认为您不意味着horizontally - 因为已经涵盖了 - 但{ {1}}而不是。

如果我是对的，这可能就是你要找的东西？ https://jsfiddle.net/tpfqk0v7/

我更改的是vertically和top:10%，而是切换为bottom: 10%

旁注：我刚刚添加了背景，以便更容易看到实际的变化。一切都是透明的，没有背景图像可见，这有点难;）

如果你真的是指x轴/水平包装，那么当然只是忽略我的答案。

Answer 2

尝试从css文件中删除max-width: 800px类括号中的.welcome-content-wrap。

Answer 3

宽度：100％;

但是你也有最大宽度，你可能想检查是否有阻止它。

垂直拉伸div以适合内容

3 个答案: