1. 首頁
  2. 問答
  3. 如何使文本框與圖像重疊？

如何使文本框與圖像重疊？

2015-06-24 57 views
0

我有以下的HTML和CSS：如何使文本框與圖像重疊？

/*.fullrecent{ 
 
    position: relative; 
 
}*/ 
 
.recentimage { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
    height: 500px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.whitebox { 
 
    background-color: white; 
 
}
<div class="fullrecent"> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox">Hello World!</div> 
 
    </div> 
 
</div>

什麼我的目標做的是建立與這些照片，我可以做一個2×2矩陣，但它毀了的時候我試圖添加一個額外的功能，即添加一個白色矩形，每個圖像的底部從左端到右端重疊每個圖像。有人知道怎麼做嗎？

來源

2015-06-24 theamateurdataanalyst

回答

1

這是，如果我理解你正確地質疑。關鍵是將文本框設置爲絕對位置，如果您希望它與圖像重疊。

http://jsfiddle.net/592cxncn/

.fullrecent { 
 
    overflow: auto; 
 
} 
 
.recentconcert { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.recentimage { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: top; 
 
} 
 
.whitebox { 
 
    /* background: white; */ 
 
    background: rgba(255,255,255, .75); 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    bottom: 0; 
 
}
<div class="fullrecent"> 
 
    <div class="recentconcert"> 
 
     <img class="recentimage" src="//dummyimage.com/500/333"/> 
 
     <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
     <img class="recentimage" src="//dummyimage.com/500/666"/> 
 
     <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
     <img class="recentimage" src="//dummyimage.com/500/999"/> 
 
     <div class="whitebox">Hello World!</div> 
 
    </div> 
 
    <div class="recentconcert"> 
 
     <img class="recentimage" src="//dummyimage.com/500/ccc"/> 
 
     <div class="whitebox">Hello World!</div> 
 
    </div> 
 
</div>

來源

2015-06-24 20:50:05 Stickers

0 

<html> 
 
<style> 
 
html, body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
/*.fullrecent{ 
 
    position: relative; 
 
}*/ 
 
.recentconcert{ 
 
    display: inline-block; 
 
    position: relative; 
 
    height : 500px; 
 
    width: 49.99%; 
 
} 
 
.recentimage{ 
 
    height: 100%; 
 
    width: 100%; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size:  cover; 
 
    
 
    
 
} 
 
.whitebox{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width : 100%; 
 
    height : 10px; 
 
    background-color: white; 
 
} 
 
</style> 
 

 
<body> 
 
<div class="fullrecent"> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2015-06-24 20:45:41

+0

和解釋，而不是僅僅傾銷代碼做到這一點，通常預期（和樂於助人）。 – j08691

0

我不是100％確定到底你的意思......但對於這個fiddle？這是你的意思嗎？

而不是使用img元素，我將divs background-image屬性設置爲圖像url（避免在這種情況下使用position：absolute）。我還使用rgba（）使白色背景變爲半透明。

CSS：

.recentconcert{ 
    background-image: url('https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2'); 
    background-repeat: no-repeat; 
    background-position: center; 
    width:50%; 
    height:500px; 
    float:left;  
} 

.whitebox{ 
    background-color: rgba(255,255,255,.6); 
    width:100%; 
    margin-top:450px; 
    height:50px; 
    text-align:center; 
}

來源

2015-06-24 20:45:59 Maverick976

0

它是你想要的結果：

<html> 
 
<style> 
 
/*.fullrecent{ 
 
    position: relative; 
 
}*/ 
 
.recentconcert{ 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size:  cover; 
 
    
 
    
 
} 
 
.whitebox{ 
 
    background-color: white; 
 
} 
 
.recentimage{ 
 
width: 100%; 
 
} 
 

 
</style> 
 

 
<body> 
 
<div class="fullrecent"> 
 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    
 

 
    <div class="recentconcert"> 
 
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2"> 
 
    <div class="whitebox"> 
 
    Hello World! 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2015-06-24 20:48:08 Dima

1

您可以使用position:absolute重疊的圖像上的文字。

更新你的CSS這樣的：

.recentconcert { 
    position: relative; 
    float: left; 
    width: 50%; 
} 

.recentconcert:after { 
    display: block; 
    clear: both; 
    content: ""; 
} 

.whitebox { 
    background-color: white; 
    position: absolute; 
    bottom: 0; 
} 

.recentimage{ 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 500px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size:  cover; 
}

Fiddle

來源

2015-06-24 20:51:42

0

您可以通過下面的代碼

<html> 
<style> 
.recentconcert 
{ 
margin:3px; 
float: left; 
width: 48%; 
height: 500px; 
background-image:url('https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2'); 
background-repeat: no-repeat; 
background-size:  cover; 
position:relative; 
border:2px solid black; 
} 
.whitebox 
{ 
height:40px; 
width:100%; 
bottom:0px; 
position:absolute; 
text-align:center; 
background-color: white; 
} 
</style> 

    <body> 
<div class="fullrecent"> 
<div class="recentconcert"> 
<div class="whitebox"> 
Hello World! 
</div> 
</div> 


<div class="recentconcert"> 
<div class="whitebox"> 
Hello World! 
</div> 
</div> 


<div class="recentconcert"> 
<div class="whitebox"> 
Hello World! 
</div> 
</div> 


<div class="recentconcert"> 
<div class="whitebox"> 
Hello World! 
</div> 
</div> 
</div> 


</body> 
</html>

來源

2015-06-24 21:30:03

相關問題

 相關問題