我希望將燈箱放在背景圖像的頂部，以便可以通過燈箱看到背景圖像。我試圖進(jìn)入圖片（頂部）而不是在它之外，但到目前為止沒有任何效果。我想把這個標(biāo)題和這些文字放在白框中，背景圖像看到槽（不透明度大約為 0.5）。????????<h2?style="color:?black"?align="center">Food?is?essential?part?of?our?well-being</h2>?
????????<p>Our?expertise?</p>這是引導(dǎo)程序/HTML。<!doctype html><html>? <head>? ? <!-- Required meta tags -->? ? <meta charset="utf-8">? ? <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">? ? <!-- Bootstrap CSS -->? ? <link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><link rel="stylesheet" href="style.css">? ? <title>Hello, world!</title>? </head>? <body>? ? <nav class="navbar navbar-expand-lg navbar-light bg-light">? <a class="instagram" href="#">? <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/38-instagram-256.png" width="35" height="35" alt=""></a>? ? <a class="facebook" href="#">? <img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-256.png" width="35" height="35" alt=""></a>? ? ? <a class="twitter" href="#">? <img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/twitter-square-256.png" width="35" height="35" alt=""></a>? <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">? ? <span class="navbar-toggler-icon"></span>? </button>
2 回答
慕運(yùn)維8079593
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個贊
您可以使用display: flexon.container將元素放置.container在頂部。我添加了一些注釋來最小化您的代碼。一探究竟！
.container {
background-image: url("https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg");
/* Add the background image like this */
height: 500px;
/* Give the background image the correct height */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
/* Places content inside on top */
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
}
.transbox {
padding: 30px;
background-color: rgba(255, 255, 255, 0.5);
/* Opacity can be given to background with rgba*/
border: 1px solid black;
height: 100px;
}
<div class="container" href="service">
<div class="transbox">
<h2>
Food is essential part of our well-being
</h2>
<p>Our expertise </p>
</div>
</div>
泛舟湖上清波郎朗
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個贊
只需將此 CSS 添加到您的.transbox樣式中即可
https://jsfiddle.net/rjaw5nvx/
position: absolute; top: 50%; transform: translateY(-50%);
您還可以使用 Flexbox 使框垂直和水平居中，但這有點(diǎn)復(fù)雜。
- 2 回答
- 0 關(guān)注
- 178 瀏覽
添加回答
舉報(bào)
0/150
提交
取消