CSS 이미지가없는 투명 오버레이

CSS 만 사용하여 첨부 된 이미지와 같은 것을 만들고 싶습니다. 지금까지 내가 함께-올라와있다 :CSS 이미지가없는 투명 오버레이

.block5-header:after { 
    content:""; 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    width:100%; 
    background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat; 
    background-size: contain; 
}

그러나이 솔루션은 내가 헤더 블록의 다양한 크기를 가지고, 다른 PNG 이미지를 많이 사용하는 것이 필요합니다. 방사형 그래디언트가있는 의사 요소를 사용하려고했지만 아무 소용이 없습니다. 좀 더 간단한 해결책이 있다면 알려주세요.)

내가 뭘하고 싶은지 그림. http://i.imgur.com/pwN54o1.png

출처

2013-10-24 toHo

링크가 작동하지 않습니다. – Nitesh

링크를 업데이트 할 수 있습니까? – mithataydogmus

이것을 시도하십시오 : http://image.bayimg.com/496b2125d3e39f389a0cd01c2fb3b1ce510f.jpg – toHo

좋아을 시도 할 수 있다는 괜찮다면, 나는 CSS를 position, circles 및 rgba 사용.

Pure CSS Solution (고정 폭)

It is also responsive to width changes

HTML

<header class="subNav"> 
    <span class="headCirc"></span> 
    Something 
</header>

CSS

.subNav { 
    width: 285px; 
    height: 60px; 
    overflow: hidden; 
    background: #4679bd; 
    display: block; 
    position: relative; 
    left: 30px; 
    top: 30px; 
    line-height: 60px; 
    font-size: 20px; 
    color: #fff; 
    padding-left: 15px; 
    border-radius: 10px 10px 0 0; 
} 

.headCirc { 
    position: absolute; 
    top: -30px; 
    left: -5%; 
    display: block; 
    width: 110%; 
    height: 70px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%; 
}

내가 한 것은 헤더의 안쪽에 절대적으로 원을 배치 한 후 헤더의 overflow: hidden을 제공하여 상자 밖으로 나온 원을 숨 깁니다.

출처

2013-10-24 13:52:30

대단히 감사합니다 !! 그것은 천재입니다. – toHo

대단히 환영합니다! 행운의 동료와 나는 당신을 도울 수 있었기 때문에 기쁘다. –

당신은 곡선을 얻을 수있을 실 거예요하지만 당신은 당신이 http://www.colorzilla.com/gradient-editor/

출처

2013-10-24 13:40:17 jeff

배경 투명한 PNG 이미지를 재배치하는 다른 방법이 있습니까? 예를 들어 폭만 조절하고 높이를 동일하게 유지하려면? – toHo

CSS에서 - 높이를 % 또는 em으로 설정하십시오. – jeff

CSS 이미지가없는 투명 오버레이

답변

관련 문제