如何使.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>
答案 0 :(得分:2)
我不完全确定您对absolute
定位的意图,但我认为您不意味着horizontally
- 因为已经涵盖了 - 但{ {1}}而不是。
如果我是对的,这可能就是你要找的东西? https://jsfiddle.net/tpfqk0v7/
我更改的是vertically
和top:10%
,而是切换为bottom: 10%
旁注:我刚刚添加了背景,以便更容易看到实际的变化。一切都是透明的,没有背景图像可见,这有点难;)
如果你真的是指x轴/水平包装,那么当然只是忽略我的答案。
答案 1 :(得分:1)
尝试从css文件中删除max-width: 800px
类括号中的.welcome-content-wrap
。
答案 2 :(得分:1)
宽度:100%;
但是你也有最大宽度,你可能想检查是否有阻止它。