如何在css/html中執行此操作？

-5

我怎樣才能使這個盒子與CSS？判斷我注意到，有其又被其他兩個div形成一個div頁面的代碼，使得圖像的並且該文本如何在css/html中執行此操作？

示例的1:2 https://i.stack.imgur.com/wFSGX.png
例如：https://i.stack.imgur.com/AXISy.png

2017-05-31 Harda Chadi

什麼盒子？並顯示你的嘗試代碼。 –

@MichaelCoker對不起，現在我添加了2個盒子的圖像。我沒有做任何嘗試，因爲我不知道如何開始 –

在這裏，你需要先做出自己的努力，加上你打算使用的標記 – LGSon

.outer{ 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
.outer > .inner{ 
 
    background: rgba(0,0,0,0.9); 
 
    color: #fff; 
 
    position: absolute; 
 
    padding: 10px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index:1; 
 
}

<div class="outer" style="background:url(http://lorempixel.com/600/300/)center center no-repeat;background-size:cover">&nbsp;<div class="inner">Some text here</div></div>

來源

2017-05-31 17:07:34 Jayakrishnan

非常感謝你 –

我想你想要做的是覆蓋透明的div上的圖像。我已經爲此寫了html和css，並在這裏爲你創建了一個plunk：http://embed.plnkr.co/7Qeh2C/。該代碼也低於：

HTML：

<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
<script src="script.js"></script> 
</head> 
<body> 
<h1>Hello Hardar!</h1> 
<div class="container"> 
<img style="width:400px" src="http://www.davemphotographics.com/wp-content/uploads/2016/02/CSP-Headshots-533-Edit.jpg"></img> 
<div class="overlay"><p>Test</p></div> 
</div> 
</body> 
</html>

CSS：

.container { 
position:relative; 
width: 400px; 
} 

.overlay { 
position: absolute; 
height:60px; 
bottom: 0; 
width:400px; 
background-color:#444; 
opacity: .8; 
} 

.overlay p { 
color: #FFF; 
text-align: center; 
}

來源

2017-05-31 17:10:39

非常感謝你 –

不客氣。如果它對你有用，你可以批准我的答案（點擊向上箭頭） –

如何在css/html中執行此操作？

回答

相關問題