回答
這裏是更新Demo
它實際上是用position: absolute
一齣戲。您給出的示例網站也採用相同的方式。其實際<img>
標籤,沒有背景
這裏是代碼:
.container{
\t max-width: 600px;
\t position: absolute;
\t top: 10px;
}
img{
\t max-width: 600px;
}
.divider{
\t width: 10px;
\t position: absolute;
\t top: 0px;
\t height: 100%;
\t background: white;
}
.one{
\t left: 150px;
}
.two{
\t left: 300px;
}
.three{
\t left: 450px;
}
<div class="container">
\t <img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
\t <div class="divider one"></div>
\t <div class="divider two"></div>
\t <div class="divider three"></div>
</div>
謝謝,爲我工作。 –
對於敏感的圖像,我建議你嘗試引導:
http://www.w3schools.com/bootstrap/bootstrap_images.asp
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
或者你可以使用CSS來做到這一點,按照鏈接: http://www.w3schools.com/css/css_rwd_images.asp
這並不回答讓div傳播圖像的主要問題。 – dshus
在這個例子中,div是透明的讓背景圖像閃耀。
想象一下你有四個窗口。你把一張巨大的照片放在他們身後。這就是這些。
您可以對「背景:透明」值進行更多研究以獲得經驗。
只是幫你或許可以用這個方法
*,:before,:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
position: relative;
display: inline-block;
height: 400px;
}
.container img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.divider {
width: 25%;
border: 10px solid #fff;
position: relative;
display: inline-block;
float: left;
top: 0px;
height: 100%;
}
.btn {
background: green;
color: white;
width: 100%;
position: absolute;
bottom: 3em;
padding: 1em;
text-align: center;
text-decoration: none;
}
<div class="container">
\t <img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
\t <div class="divider one"><a class="btn" href="#">Button</a></div>
\t <div class="divider two"><a class="btn" href="#">Button</a></div>
\t <div class="divider three"><a class="btn" href="#">Button</a></div>
\t <div class="divider four"><a class="btn" href="#">Button</a></div>
</div>
這是一個更爲靈敏的解決方案。它具有響應式div(欄和橫幅)和背景。與示例網站不同,容器不是固定寬度。
https://jsfiddle.net/Lqzqo5xf/
也可以設置在容器是一個固定的寬度,當屏幕是通過將min-width
屬性到.wrapper
類縮小到一定的大小。
就像你給出的例子,它需要分隔符(白色列)的div和一個單獨的容器與容器和背景重疊。它也使用絕對定位的分頻器,而是使用百分比作爲響應。
.wrapper {
width: 100%;
height:400px;
margin:0;
padding:0;
position: absolute;
top:0;
left:0;
}
#bg-wrapper {
background-image: url('http://www.gstatic.com/webp/gallery/1.jpg');
background-size: cover; /** Also try "contain" **/
}
.banner {
float: left;
margin-top: 70px;
width: 25%;
height: 50px;
background-color: rgba(0,0,0,0.7);
vertical-align:middle;
text-align: center;
color:white;
}
.divider {
position: absolute;
width:2%;
height: 100%;
background-color: white;
margin: 0 0 0 -1%;
padding: 0;
}
<div class="wrapper" id="bg-wrapper">
<div class="banner">
<h4>
willkommen
</div>
<div class="banner">
<h4>
willkommen
</div>
<div class="banner">
<h4>
willkommen
</div>
<div class="banner">
<h4>
willkommen
</div>
</div>
<div class="wrapper">
<div class="divider" style="left:25%;">
</div>
<div class="divider" style="left: 50%;">
</div>
<div class="divider" style="left:75%;">
</div>
</div>
- 1. 設置圖像或div爲背景
- 2. HOWTO設置一個div背景圖像
- 3. 如何爲linearlyout設置圖像背景?
- 4. 如何在另一個背景圖像背後設置背景?
- 5. 設置Div的背景圖像
- 6. 設置DIV的背景圖像
- 7. 爲UIButton設置一個背景圖像
- 8. 如何將圖像設置爲div的背景並將其「ZOrder」設置爲0?
- 9. 如何將div設置爲背景?
- 10. 將div設置爲背景
- 11. 如何將圖像設置爲背景,而沒有背景圖像屬性?
- 12. 圖像作爲背景div
- 13. 多個背景圖像的內容div
- 14. 如何設置背景圖像響應
- 15. 如何設置窗體背景圖像
- 16. 如何設置圖像背景重複?
- 17. 如何設置大背景圖像
- 18. 如何用Monotouch.Dialog設置背景圖像
- 19. 如何設置ImageButton的背景圖像?
- 20. 如何設置圖像RelativeLayout背景
- 21. 如何設置背景圖像視
- 22. 如何設置背景圖像標記
- 23. 如何在點擊時將圖像設置爲背景圖像?
- 24. 如何一個div大小設置爲它的背景圖像尺寸
- 25. 使用javascript設置一個圖像對象作爲div背景圖像
- 26. 設置JWindow背景圖像
- 27. 設置背景圖像alertdialog
- 28. angularjs設置背景圖像
- 29. 設置UIScrollView背景圖像
- 30. UITableViewCell背景圖像設置
所以,你的意思是你想使用一個單一的形象爲所有四個div的? 你能否澄清你的意思是「響應決議」?你的意思是,如果窗口縮小,圖像應該縮小? – LazerSharks
是的,圖像應該縮小。我不想在Photoshop中分割圖像... –
而div的背景應該是一個大的圖像。 –