ich vier divs verwenden einige Dienste anzuzeigen:Wie kann ich ein Hintergrundbild für mehrere Divs setzen?
Ich mag für die vier Bilder wie in diesem Beispiel ein Hintergrundbild verwenden:
Wie kann ich tun es? Die Auflösung sollte reaktionsfähig sein, sodass ich das Zuschneidewerkzeug nicht zum Schneiden des Bildes verwenden kann.
Hier ist die aktualisierte Demo
es ist eigentlich ein Spiel mit position: absolute. Die Beispielseite, die Sie erhalten, macht das auch genauso. es ist eigentlich <img> Tag, nicht Hintergrund
hier ist der Code:
.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>Danke, arbeitete für mich. –
Für ansprechende Bilder, die ich würde vorschlagen, Sie versuchen Bootstrap:
http://www.w3schools.com/bootstrap/bootstrap_images.asp
<img class="img-responsive" src="img_chania.jpg" alt="Chania">Oder Sie können CSS verwenden, es zu tun, folgen Sie dem Link: http://www.w3schools.com/css/css_rwd_images.asp
Dies beantwortet nicht die Hauptfrage, die divs ein Bild zu verbreiten. – dshus
In diesem Beispiel sind die divs transparent und ein Hintergrundbild durchscheinen lassen.
Stellen Sie sich vor Sie haben vier Fenster. Sie haben ein riesiges Bild hinter sich gebracht. Das sind diese.
Sie können mehr über den Wert "Hintergrund: transparent" recherchieren, um Erfahrung zu sammeln.
Nur vielleicht helfen Sie diese Methode
*,: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>Hier ist eine viel reaktionsfähigere Lösung. Es hat Responsive Divs (Spalten und Banner) und Hintergrund. Im Gegensatz zur Beispielwebsite hat der Container keine feste Breite.
https://jsfiddle.net/Lqzqo5xf/
Sie können auch die Container stellen Sie eine feste Breite sein, wenn der Bildschirm durch die Anwendung der min-width Eigenschaft auf die .wrapper Klasse zu einer bestimmten Größe geschrumpft wird.
Wie in dem Beispiel, das Sie angegeben haben, erfordert es Divs für die Teiler (weiße Spalten) und einen separaten Container, der den Container mit dem Hintergrund überlappt. Es verwendet auch die absolute Positionierung für die Teiler, verwendet jedoch Prozentsätze für die Reaktionsfähigkeit.
.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>
Sie meinen also, Sie ein einzelnes Bild für alle vier divs verwenden? Und können Sie klären, was Sie mit einer "reaktionsfähigen Auflösung" meinen? Meinst du, das Bild sollte verkleinern, wenn das Fenster schrumpft? – LazerSharks
Ja, das Bild sollte verkleinert werden. Ich möchte das Bild nicht in Photoshop teilen ... –
Und der Hintergrund der divs sollte ein großes Bild sein. –