나는 일부 서비스를 표시하는 네 개의 div를 사용하고 있습니다 :여러 div에 대한 배경 이미지를 설정하려면 어떻게해야합니까?
내가이 예에서와 같이 네 개의 이미지를 배경 이미지를 사용하려면 :
어떻게 내가 할 수있는 그것? 이미지를 자르려면 자르기 도구를 사용할 수 없으므로 해상도가 적절해야합니다.
http://www.w3schools.com/bootstrap/bootstrap_images.asp
<img class="img-responsive" src="img_chania.jpg" alt="Chania">아니면 그것을 CSS를 사용하는 링크를 따를 수 :
여기에 실제로 position: absolute와 놀이의 업데이트 된 Demo
입니다. 같은 방식으로하는 예제 사이트. 그 사실 <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/css/css_rwd_images.asp
을이것은 divs가 이미지를 퍼뜨리는 주요 질문에 답하지 않습니다. – 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/
또한 화면이 .wrapper 클래스에 min-width 속성을 적용하여 특정 크기로 축소 될 때, 고정 폭으로 컨테이너를 설정할 수있다.
예제와 마찬가지로 디바이더의 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>
그래서 당신은 당신이 네 div의 하나 하나 개의 이미지를 사용하고자하는 말은? "반응 형 해결책"이 의미하는 바를 명확히 할 수 있습니까? 창이 줄어들면 이미지가 축소되어야한다는 의미입니까? – LazerSharks
예, 이미지가 축소되어야합니다. Photoshop에서 이미지를 분할하고 싶지 않습니다. –
div의 배경은 하나의 큰 이미지 여야합니다. –