CSS가있는 div 내의 이미지 배치

다음 사이트를 만들려면 다음 블록을 만들어야합니다.CSS가있는 div 내의 이미지 배치

alt text

나는 아래의 HTML을 사용하는 경우 모서리가 둥근 흰색 상자와 그림자를 만들어 다음과 같은 CSS를 가지고있다.

<style type="text/css"> 
    .stripeblock { 
     width: 310px; 
     border-radius: 12px; 
     background-color: #fff; 
     padding: 10px; 
     box-shadow: 0 8px 6px -6px black; 
    } 
</style> 

<div class="stripeblock"> 
    <h1>Just some title</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to...</p> 
</div>

누락 된 유일한 것은 녹색 가로 줄무늬입니다. 몇 가지 시도했지만 올바르게 가져올 수 없습니다.
CSS를 통해 포함시키고 div 내에 별도의 요소가되지 않도록하고 싶습니다.
이것이 가능합니까?

출처

2013-02-04 nhalink

합니까''h1'해야 h1' : 여기 결과, 밖으로

는

.stribeblock { position: relative; }

확인? 이상하게 들릴지는 모르겠지만'inline' 요소를 사용했다면 녹색 요소의 너비가 제목 (고정되지 않음)만큼 길 수있는 경우에만 'border-top'을 만들 수 있습니다 – Moseleyi

아니요, 녹색 요소가 고정되어 있습니다 (115 x 5) – nhalink

H1에 이미지 배경을 추가하거나 이미지와 순수한 html + css를 사용하고 싶지 않으십니까? – Moseleyi

당신은 절대적으로이 작업을 수행 할 수 있습니다 함께 할.

': before'의사 요소를 사용하여 블록의 스타일을 지정하고 필요한 위치에 배치하십시오.

.stripeblock:before { 
    background: #c8d300; 
    content: ""; 
    display: block; 
    height: 7px; 
    position: absolute; 
    top:0; 
    left: 20px; 
    width: 125px; 
}

을 그리고 당신은 올바른 위치에있는 :before; 블록에 .stribeblock에 position: relative;를 추가해야합니다

이보십시오. http://jsfiddle.net/qVFeT/

출처

2013-02-04 15:26:01 Axel

바로 돈! 감사! – nhalink

글쎄, 여분의 이미지 나 마크 업없이, 배경 이미지

.stripeblock { 
    width: 310px; 
    border-radius: 12px; 
    /*background-color: #fff;*/ 
    background:#fff url('some-rectangular-green-image.gif') no-repeat 0 0; 
    padding: 10px; 
    box-shadow: 0 8px 6px -6px black; 
}

출처

2013-02-04 15:23:09

CSS가있는 div 내의 이미지 배치

답변

관련 문제